不能垂直对齐div内的文字

Question

我想让这些div内的图像和文字都垂直居中。我得到img与top: 0; bottom: 0; margin: auto;一起工作。然后，我试图通过将line-height和height设置为与容器相同的高度来垂直对齐文本，但是它不能很好地居中，它已经关闭了一定量。

我该如何得到这个工作？

<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=""> 
 
\t <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=""> 
 
\t <span><a href="#" style="line-height:70px; height:70px; position:absolute; left:33px;">Mail Us</a></span> 
 
    </div> 
 
</div>

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=""> 
 
\t <a href="tel:+34646611421"><span>646611421</span></a> 
 
    </div> 
 
    <div><!--contenedor mail--> 
 
    <img style="width:32px; height:32px;" src=""> 
 
\t <a><span>Mail Us</span></a> 
 
    </div> 
 
</div>