你如何垂直居中文本與div元素中的圖像？

Question

我正在嘗試製作一個小段，在其左側有一個圖像，文本垂直居中在圖像的右側。對於下面的第二張圖片，我需要右側的圖像，文本垂直居中在圖像的左側。

<div id="Segment2"> 
    <h2>Fig Tree is a discussion tool that helps organizations innovate</h2> 
    <h3>We took the basics of a discussion thread and added...</h3> 

    <div style="height:259px;" id="Branching"> 
     <section class=LeftBoundPic> 
      <h4>Discussion Branching</h4> 
      <img src="SomePhoto.png" alt="FigTree"/> 
     </section> 
     <span> 
     Bunch of text <br> 
     that should be next to the image. 
     </span> 
    </div> 

    <div style="height: 259px; margin-top: 50px;" id="ContentHubs"> 
     <section class=RightBoundPic> 
      <h4>Content Hub</h4> 
      <img src="SomePhoto.png" alt="FigTree"/> 
     </section> 
     <span> 
      More text that should <br> 
      be on the left of the photo now. 
     </span> 
    </div> 
</div> 

這是它的HTML部分，但我不能想出一種方式來與CSS樣式。

Answer 1

.div-table{ 
 
display:table-cell; 
 
    border:1px solid BLACK; 
 
} 
 

 
.div-cell{ 
 
    display:table-cell; 
 
    padding:5px; 
 
    vertical-align:middle; 
 
} 
 

 
.div-row{ 
 
    display:table-row; 
 
    vertical-align:middle; 
 
}

<div class='div-table'> 
 
    <div class='table-row'> 
 
     <div class='div-cell'> 
 
     <h4>Discussion Branching</h4> 
 
     </div>  
 
    </div> 
 
    <div class='table-row'> 
 
     <div class='div-cell'> 
 
     <img src="SomePhoto.png" alt="FigTree"/> 
 
     </div> 
 
     <div class='div-cell'> 
 
     <span> Bunch of text that should be next to the image. <br> More text and yet more and more.<br> Even more text text. </span> 
 
     </div> 
 
    </div>  
 
</div> 
 

 
<br> 
 

 
<div class='div-table'> 
 
    <div class='table-row'> 
 
     <div class='div-cell'> 
 
     <h4>Discussion Branching</h4> 
 
     </div>  
 
    </div> 
 
    <div class='table-row'> 
 
     <div class='div-cell'> 
 
     <span> Bunch of text that should be next to the image. </span> 
 
     </div> 
 
     <div class='div-cell'> 
 
     <img src="SomePhoto.png" alt="FigTree"/> 
 
     </div> 
 
    </div>  
 
</div>

Answer 2

如果您不需要支持IE9，flexbox是造成這種情況的完美契合（這是非常well supported現在）。

#Branching, #ContentHubs { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    -webkit-align-items: center; 
    align-items: center; 
} 

.RightBoundPic { 
    -webkit-order: 1; 
    order: 1; 
} 

Answer 3

<section class='TextBox RightBoundPic'> 
    <h4>Content Hub</h4> 
    <img src="SomePhoto.png" alt="FigTree"/> 
</section> 

.TextBox > h4, .TextBox > img { display: inline-block; } 
.TextBox > img { vertical-align: middle; } 

Answer 4

我會建議使用顯示：表並顯示：表細胞是在幾乎所有的瀏覽器

<style> 
#Branching {display: table;} 
#Branching .RightCenteredText{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 
#Branching .LeftBoundPic {display: table-cell;} 
#ContentHubs {display: table;} 
#ContentHubs .LeftCenteredText{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 
#ContentHubs .RightBoundPic {display: table-cell;} 
</style> 
<div id="Segment2"> 
    <h2>Fig Tree is a discussion tool that helps organizations innovate</h2> 
    <h3>We took the basics of a discussion thread and added...</h3> 

    <div id="Branching"> 
    <section class=LeftBoundPic> 
     <h4>Discussion Branching</h4> 
     <img src="SomePhoto.png" alt="FigTree"/> 
    </section> 
    <span class="RightCenteredText"> 
    Bunch of text <br> 
    that should be next to the image. 
    </span> 
    </div> 

    <div id="ContentHubs"> 
    <span class="LeftCenteredText"> 
     More text that should <br> 
     be on the left of the photo now. 
    </span> 
    <section class=RightBoundPic> 
     <h4>Content Hub</h4> 
     <img src="SomePhoto.png" alt="FigTree"/> 
    </section> 
    </div> 
</div> 

ATLEAST我們可以利用這一點，直到所有的大多是支持的佈局瀏覽器開始支持css3 flex和flex盒佈局

Answer 5

使該圖像成爲div的背景並隱藏e表示howtocenterincss.com的div this css suggested，或者您可以同時搜索其他查詢。

這個CSS是兼容縮減到IE8