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>