浮遊画像をCSSでセンタリングする

Question

私はjavascriptコードを持っており、コードに従ってcertein divの画像を異なる高さに配置する必要があります。しかし、私はまた、イメージを中心にする必要があります。私はウェブを検索し、floatの代わりにdisplay:inline-blockを使用するなど、さまざまな解決策を見つけましたが、異なる高さは機能しません。私が見つけたものは、そのトリックをするようなことはありません。

最終的なタグを生成するJavascriptコードは次のとおりです。margin_topは、必要な高さの差がある変数です。

var added_tags = ('<img style="margin-top:'+ margin_top.toString() +'px; float:left; margin-left:5px;" src="[Image source]" /> '+'<a></a>'); 

Answer 1

浮動要素をセンタリングすることはできません。中心に置かれた要素上のdisplay: inline-blockとそのコンテナ上のtext-align: centerが行く方法です。

異なる高さの垂直方向の配置については、必要に応じて、インラインブロック要素にvertical-align: middleまたはtopまたはbottomを使用できます。

.wrap { 
 
    text-align: center; 
 
} 
 

 
.wrap>img { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="wrap"> 
 
    <img src="http://placehold.it/100x150/fa0"> 
 
    <img src="http://placehold.it/80x70/a0f"> 
 
    <img src="http://placehold.it/200x180/af0"> 
 
    <img src="http://placehold.it/50x120/f7a"> 
 
</div>

OR

.wrap { 
 
    text-align: center; 
 
} 
 

 
.wrap>img { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div class="wrap"> 
 
    <img src="http://placehold.it/100x150/fa0"> 
 
    <img src="http://placehold.it/80x70/a0f"> 
 
    <img src="http://placehold.it/200x180/af0"> 
 
    <img src="http://placehold.it/50x120/f7a"> 
 
</div>

OR

.wrap { 
 
    text-align: center; 
 
} 
 

 
.wrap>img { 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
}

<div class="wrap"> 
 
    <img src="http://placehold.it/100x150/fa0"> 
 
    <img src="http://placehold.it/80x70/a0f"> 
 
    <img src="http://placehold.it/200x180/af0"> 
 
    <img src="http://placehold.it/50x120/f7a"> 
 
</div>

Answer 2

あなたがFLOATED要素を使用しなければならない場合、望ましい結果をacheivedすることができます。

section { 
 
     padding:20px; 
 
     margin:20px; 
 
     border:1px solid silver; 
 
     box-sizing:border-box; 
 
} 
 

 
span { 
 
     float:right; 
 
} 
 

 
section.centre span { 
 
     margin-right:50%; 
 
     transform:translateX(50%); 
 
}

<section> 
 
     <span>ALPHA</span> 
 
     <br style="clear:both;" /> 
 
</section> 
 

 
<section class="centre"> 
 
     <span>BRAVO</span> 
 
     <br style="clear:both;" /> 
 
</section>