文本垂直对齐

Question

我需要设置列表的垂直对齐方式，使其与旁边的图片居中。

HTML

<div class="row">
         <div class="box">
             <div class="col-lg-12">
                 <hr>
                 <h2 class="intro-text text-center">Čím se
                     <strong>zabýváme</strong>
                 </h2>
                 <hr>
                 <img class="img-responsive img-left thumbnail" src="img/intro-pic.jpg" alt="">
                 <hr class="visible-xs">
                 <ul class="list-unstyled intro-text">
                   <li>Rekonstrukce bytů, bytových a rodinných domů</li>
                   <li>Stavby rodinných domů</li>
                   <li>Zateplování fasád</li>
                   <li>Rekonstrukce koupelen</li>
                   <li>Zemní práce</li>
                 </ul>
             </div>
         </div>
     </div>

CSS

 .box {
     margin-bottom: 20px;
     padding: 30px 15px;
     background: #fff;
     background: rgba(255,255,255,0.9);
 }

 .intro-text {
     text-transform: uppercase;
     font-size: 1em;
     font-weight: 400;
     letter-spacing: 1px;
 }

现在文字在图片上方对齐，看起来不太好，因为下面有很多空闲 space。

Answer 1

您可以尝试为此使用定位。（尽管 bootstrap 不是使用恕我直言的最好的插件）：

html,body{
  margin:0;
  padding:0;
  }
.box {
   margin-bottom: 20px;
   padding: 30px 15px;
   background: #fff;
   background: rgba(255, 255, 255, 0.9);
 }
 .intro-text {
   text-transform: uppercase;
   font-size: 1em;
   font-weight: 400;
   letter-spacing: 1px;
 }
 .myWrap {
   position: relative;
   margin:0;
   padding:0;
   display:table;
 }
 #this {
   position: absolute;
   height:100%;
   top:0;
   right:-100%;
   width:80%;
   display:table-cell;
   vertical-align:center;
 }

<div class="row">
  <div class="box">
    <div class="col-lg-12">
      <hr>
      <h2 class="intro-text text-center">Čím se
                     <strong>zabýváme</strong>
                 </h2>
      <hr>
      <div class="myWrap">
        <img class="img-responsive img-left thumbnail" src="http://placekitten.com/g/300/200" alt="">
        <hr class="visible-xs">
        <ul id="this" class="list-unstyled intro-text">
          <li>Rekonstrukce bytů, bytových a rodinných domů</li>
          <li>Stavby rodinných domů</li>
          <li>Zateplování fasád</li>
          <li>Rekonstrukce koupelen</li>
          <li>Zemní práce</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以在图像上使用 inline-block 和 ul 然后将它们垂直居中对齐。

.box img, .box ul {
    display: inline-block;
    vertical-align: middle;
}

<div class="row">
    <div class="box">
        <div class="col-lg-12">
            <hr/>
             <h2 class="intro-text text-center">Čím se
                     <strong>zabýváme</strong>
                 </h2>

            <hr/>
            <img class="img-responsive img-left thumbnail" src="http://90574.w74.wedos.ws/img/intro-pic.jpg" alt="" />
            <ul class="list-unstyled intro-text">
                <li>Rekonstrukce bytů, bytových a rodinných domů</li>
                <li>Stavby rodinných domů</li>
                <li>Zateplování fasád</li>
                <li>Rekonstrukce koupelen</li>
                <li>Zemní práce</li>
            </ul>
            <hr class="visible-xs" />
        </div>
    </div>
</div>

文本垂直对齐

Text vertical-align

html

css

twitter-bootstrap

twitter-bootstrap-3