如何使用引導程序 4 在一個 div 中對齊文本中心和圖像

Question

                                        Text                            Image

我想在引導程序中對齊中心的文本和右側的圖像，但我無法這樣做

這是我的 html 代碼

<div class="english-Box">
        <h1 class="text-center color-English">English</h1>
    <img class="eng-Img" src="images/abc.png"></img>
        </div>

這是css代碼

.eng-Img{
   float:left;
  }
.color-English{
    padding-top: 14px;
    color: #7952b3;
    font-family: 'PT Sans', sans-serif;
    font-size: 25px !important;
    letter-spacing: 2px;
  }

  .english-Box{
    border-radius: 5px;
    Border:1px solid #7952b3;
    height: 60px;
    width:20%;
    display: block;
    margin:0 auto 80px auto !important;
    float: none;

  }

Answer 1

為您的圖像pull-right類，例如：

<img class="eng-Img pull-right" src="images/abc.png"/>

請注意， img標簽是一個自閉合標簽，應該以>不需要</img>結尾。

您可以使用 bootstrap Grid-System來安排您的 div 如下：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="english-Box row"> <div class="col-xs-10"> <h1 class="color-English text-center">English</h1> </div> <div class="col-xs-2"> <img class="eng-Img pull-right" src="images/abc.png" /> </div> </div>

Answer 2

由於您使用的是引導程序，因此只需使用引導程序浮點類。 像這樣的事情會成功。 將“float-left”類添加到“h1”並將“float-right”添加到“img”。

<div class="english-Box">
    <h1 class="text-center color-English float-left">English</h1>
    <img class="eng-Img float right" src="images/abc.png"></img>
</div>

在 css 中，給 'h1' 一個寬度。 這將有助於 h1 的文本在該寬度內居中。

.color-English {
  width: 70%;
}

Answer 3

使用以下 html 更改您的代碼：

<div class="container">
<div class="english-Box">
    <h1 class="text-center color-English">English</h1>    
</div>
    <img class="eng-Img" src="images/abc.png" />
</div>

和 CSS ：

.container{
  position : relative;
  width : 100%;
}
.eng-Img{

   float:right;
  }
.color-English{
    padding-top: 14px;
    color: #7952b3;
    font-family: 'PT Sans', sans-serif;
    font-size: 25px !important;
    letter-spacing: 2px;    
  }

  .english-Box{
    position:absolute;
    border-radius: 5px;
    Border:1px solid #7952b3;
    height: 60px;
    width:20%;
    display: block;
    margin:0 auto 80px auto !important;
    left:50%;

  }

將整個內容包裝在一個容器類中，然后使用positioning作為內容包裝器是relative ，其內容是absolute 。

希望能幫助到你。

Answer 4

為 bootstrap 4 賦予你的圖像類float-right 。 pull-right用於 bootstrap 3。

<img class="float-right eng-Img" src="images/abc.png"/>