我有一个javascript代码,它需要根据代码将图像放在certein div中的不同高度。但是,我还需要将图像居中。我在网上搜索并找到了不同的解决方案,例如使用display:inline-block
代替float
,但不同的高度不起作用。我发现的任何东西似乎都没有。
以下是生成最终代码的Javascript代码,margin_top
是具有所需高度差的变量。
var added_tags = ('<img style="margin-top:'+ margin_top.toString() +'px; float:left; margin-left:5px;" src="[Image source]" /> '+'<a></a>');
答案 0 :(得分: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>
答案 1 :(得分:0)
如果必须使用浮动元素,则可以实现所需的结果:
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>