無法獲得引導程序的媒體佈局以將圖像與居中標題對齊

Question

我正在嘗試使用引導媒體佈局將圖像與標題左側對齊。現在發生的情況是圖像在瀏覽器左側對齊，而標題居中。我已經嘗試了一些不同的事情，但是這是我認爲的代碼「應該」是正確的：

<div> 
    <!-- some stuff --> 
    <div class="text-center form-inline"> 
     <div class="media"> 
      <div class="media-left" style="vertical-align: middle"> 
       <div class="visible-lg"> 
        <img data-bind="attr.src: agencyLogo" width="200" height="100"></img> 
       </div> 
      </div> 
      <div class="media-body" style="vertical-align: middle"> 
       <h1 class="media-heading">My Cool Header</h1> 
      </div> 
     </div> 
    </div> 
    <!-- some more stuff --> 
</div> 

編輯：

從引導文件：

<div class="media"> 
    <a class="media-left" href="#"> 
     <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> 
    </a> 
    <div class="media-body"> 
     <h4 class="media-heading">Media heading</h4> 
     Cras sit amet nibh libero,.... 
    </div> 
    </div> 
</div> 

Answer 1

正在發生的事情是圖像在瀏覽器左側對齊，而標題居中。

出現這種情況的原因是因爲你有兩個div元素，默認情況下有display價值block。

如果你想在兩個元件爲不是塊的元件，並且「對齊」彼此相鄰你必須要麼使用不同的display屬性（如inline或flex）或給元件float property + value。

檢查以下範例或this fiddle;

.el1, .el3, .el5 { 
 
    background-color: grey; 
 
} 
 

 
.el2, .el4 { 
 
    background-color: lightblue; 
 
} 
 

 
.el1 { 
 
    margin-bottom: 5px; 
 
} 
 

 
.el2, .el3 { 
 
    display: inline; 
 
} 
 

 
.el4, .el5 { 
 
    float: left; 
 
    margin-top: 5px; 
 
} 
 

 
.flexin { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    margin-top: 5px; 
 
} 
 

 
.el6, .el7 { 
 
    background-color: orange; 
 
    border-right: 1px solid black; 
 
    -webkit-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
} 
 

 
/* micro cf */ 
 
cf:before, 
 
.cf:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
}

<div class="el1">I have display block</div> 
 
<div class="el2">I have display inline</div> 
 
<div class="el3">I also have display inline</div> 
 
<div class='cf'> 
 
    <div class="el4">My float value is left</div> 
 
    <div class="el5">My float value is also left</div> 
 
</div> 
 
<div class='flexin'> 
 
    <div class="el6">My parent's display value is flex</div> 
 
    <div class="el7">And our flex value is 1</div> 
 
</div>