將文本垂直對齊到我的列div中間

好吧，我們開始吧。我對HTML和bootstrap非常陌生，因此對我一無所知。我想垂直對齊我的行內的文本到中間。你會看到我的頁面上有一個lg列。我在塊引用中的文本默認爲頂部或上部垂直對齊。像下面添加一個樣式屬性似乎沒有解決問題。我是否需要使用CSS並鏈接到它？將文本垂直對齊到我的列div中間

<div class='nav-wrapper container'> 
     <div class='row'> 
      <div class="col-lg-12" style="vertical-align:bottom"> 
       <center> 
        <blockquote cite="https://www.brainyquote.com/quotes/quotes/h/hippocrate133222.html"> 
         <i>Healing is a matter of time, but it is sometimes a matter of opportunity.</i> 
        </blockquote> 
       </center> 
      </div> 
     </div>

來源

2017-08-14 Andy G

試的text-align：中心 –

您正在使用什麼版本的引導呢？如果是v4，則可以利用'flexbox'屬性。 – fubar

我需要將柔性盒放在列div內嗎？ –

救救你自己！如果您是HTML新手，請不要使用引導程序！您仍然可以毫髮無損地... + <center>標記不受支持並且已被棄用。首先是橫向的。有大約6種方式來集中某些東西，並且它們都有最好的用例。您不能在'塊'級元素上使用內嵌塊類型規則，如vertical align。

這裏有2種方法。我敢打賭你只需要考慮填充不同。

.padding-style { 
 
    border: 1px solid blue; 
 
    text-align: center; 
 
    padding: 40px 0; /* top/bottom left/right */ 
 
} 
 

 
.flexbox-style { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    min-height: 140px; /* arbitrary height */ 
 
} 
 

 
h1 { 
 
    display: inline-block; 
 
    border: 1px solid green; 
 
}

<section class='padding-style'> 
 
    <h1>centered thing</h1> 
 
</section> 
 

 
<section class='flexbox-style'> 
 
    <h1>centered thing</h1> 
 
</section>

來源

2017-08-14 22:52:26 sheriffderek

感謝您的回答。我能夠處理你給我的東西。你不喜歡bootstrap什麼？你會推薦什麼？ –

我推薦學習CSS。 Bootstrap是CSS規則的集合/，思想已過時。你會發現自己在說'如何在自舉中做x' - 那時你知道你應該學習CSS。 – sheriffderek

將文本垂直對齊到我的列div中間

回答

相關問題