在CSS

时间:2017-07-01 10:29:35

标签: javascript html css

我有一个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>');

2 个答案:

答案 0 :(得分:1)

您不能将浮动元素居中。要成为中心元素的display: inline-block和容器上的text-align: center是可行的方法。

关于不同高度的垂直对齐,您可以在内联块元素上使用vertical-align: middletopbottom,无论您需要什么。

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