親画像の中央に表示するテキストの配置方法は？

Question

私は、HTML、CSS、およびブートストラップを使用して応答性の高いWebページを作成しようとしています。

画像の位置に関連してテキストを中央に配置するにはどうすればよいですか？画像はテキストの左側にある必要があります。ここで

はいくつかのコードです：

<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に増やし、効果を調整します。
• また、マイケルが指摘したように、フレキシボックスの提案以下の浮遊画像、避ける：あなたはまだfloatを使用したい場合は

.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>

を、（テキストの垂直センタリングのため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>