如何將文本對齊顯示在父圖像的中間？

Question

我試圖做一個響應式網頁，使用html，css和bootstrap。

我如何居中文字，相對於圖像位置？圖片必須位於文字的左側。

下面是一些代碼：

<div class="col-xs-1" style="background-color: black;"> 
        <div> 
         <img style="float: left;" src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" class="" /> 
         <div> 
          Hello World! 
         </div> 
       </div> 
</div> 

Answer 1

1. 儘量不要使用內嵌樣式
2. COL-XS-1過小，使用COL-XS-4或COL-XS-6或COL-XS-12？

.mycontainer { 
 
    background-color: black; 
 
} 
 

 
.myimg { 
 
    vertical-align: middle 
 
} 
 

 
.mytext { 
 
    color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="col-xs-4 mycontainer"> 
 
    <div> 
 
    <img style="vertical-align:middle" src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" /> 
 
    <span class="mytext"> 
 
     Hello World! 
 
    </span> 
 
    </div> 
 
</div>

Answer 2

不上浮的圖像，並添加.text-center父。您可能還想使用更寬的列類，以免在小視口中變得過於狹窄。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="col-xs-1" style="background-color: black;"> 
 
    <div class="text-center"> 
 
    <img src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" class="" /> 
 
    <div> 
 
     Hello World! 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

• 父元素是col-xs-1短於它的子內容。
• 將父元素大小增加到col-xs-4之類，並調整爲您的好處。
• 另外，作爲邁克爾指出，避免浮動圖像，低於Flexbox的建議：

.imgCont { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="col-xs-4" style="background-color: black;"> 
 
    <div class="imgCont"> 
 
    <img src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" class="" /> 
 
    <div> 
 
     Hello World! 
 
    </div> 
 
    </div> 
 
</div>

如果您仍然希望使用float，摘要如下（使用line-height文本垂直居中） ：

.text { 
 
    line-height: 65px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="col-xs-4" style="background-color: black;"> 
 
    <div> 
 
    <img style="float: left;" src="~/Content/img/Assets/img1.png" alt="" width="65" height="65" class="" /> 
 
    <div class="text"> 
 
     Hello World! 
 
    </div> 
 
    </div> 
 
</div>