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

如果您不需要支持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 2

将该图片作为div的背景，并在this css suggested内的div howtocenterincss.com内，或者您可以同时搜索其他查询。

此css与IE8兼容

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

我建议使用display：table和display：table-cell，这是几乎所有浏览器中最受支持的布局

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

至少我们可以使用它，直到所有浏览器开始支持css3 flex和flex box layout

如何使用div元素中的图像垂直居中文本？

5 个答案: