Question

我希望这些div中的图像和文本都垂直居中。

我让img与top: 0; bottom: 0; margin: auto;合作。然后，我尝试通过将line-height和height设置为与容器相同的高度来垂直对齐文本，但它并没有很好地居中，它已经关闭了一些。< / p>

我怎样才能让它发挥作用？

＆＃13;

<div class="border" style="border:1px solid red; width:100%; height:70px; position:relative;">
  <div class="border" style=" border:1px solid red; float:left; width:25%; height:100%; position:relative;"><!--contenedor facebook-->
    <img style="width:32px; height:32px; position:absolute; top:0; bottom:0; margin:auto;"  src="">
	<a href="tel:+34646611421"><span style=" position:absolute; left:33px; line-height:70px; height:70px; font-family:Oswald, sans-serif; font-size:24px;">646611421</span></a>
  </div>
  <div class="border" style=" border:1px solid red; float:left; width:25%; height:100%; position:relative;"><!--contenedor mail-->
     <img style="width:32px; height:32px; position:absolute; top:0; bottom:0; margin:auto;"  src="">
	<span><a href="#" style="line-height:70px; height:70px; position:absolute; left:33px;">Mail Us</a></span>
  </div>
</div>

＆＃13;

Answer 1

目前还不是很清楚，但有很多方法可以使用父级div的样式将内容与display:flex;和justify-content:center;对齐。或者您也可以使用display:inline-block;和vertical-align:middle;

更多信息on this website for flexbox和此Codepen for inline-block/vertical-align

div {
border:solid 1px #cc0000;
}

.flex-centered {

display:flex;
justify-content:center;
flex-direction: row;
flex: 2;
}

.flex-centered2 {

display:flex;
justify-content:center;
flex-direction: column;

}

.flex-centered3 {

display:flex;
justify-content:start;
flex-direction: row;

}
.vertical-middle {  }
.vertical-middle img, .vertical-middle a { display:inline-block; vertical-align:middle;  }

<div class="flex-centered">
   <div>Block 1</div>
   <div>Block 2</div>
</div>

<br />
<br />

<div class="flex-centered2">
   <div>Block 1</div>
   <div>Block 2</div>
</div>

<br />
<br />

<div class="flex-centered3">
   <div class="flex-centered2">
   Block 1
   </div>
   <div class="flex-centered">
    <div>Block 2</div>
    <div>Block 3</div>
   </div>
</div>

<br />
<br />

<div class="flex-centered3 vertical-middle">
  <div>
    <img style="width:32px; height:32px;"  src="">
	  <a href="tel:+34646611421"><span>646611421</span></a>
  </div>
  <div><!--contenedor mail-->
     <img style="width:32px; height:32px;"  src="">
	   <a><span>Mail Us</span></a>
  </div>
</div>

无法在div内垂直对齐此文本

1 个答案: