對齊內嵌塊Div中的文本對齊？ CSS

Question

我想對齊一組文本，包括p和h5 html元素。我正在使用內聯塊顯示類型來使文本與標題位於同一行。如果不能與這種顯示類型對齊，那麼如果您可以在同一行上提供3種標題的替代方式，將會有所幫助。這裏是我的代碼：

.container { 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
    padding: 0 20px; 
 
    box-sizing: border-box; 
 
} 
 
.column, 
 
.columns { 
 
    width: 100%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 
/* For devices larger than 400px */ 
 

 
@media (min-width: 400px) { 
 
    .container { 
 
    width: 85%; 
 
    padding: 0; 
 
    } 
 
} 
 
/* For devices larger than 550px */ 
 

 
@media (min-width: 550px) { 
 
    .container { 
 
    width: 80%; 
 
    } 
 
    .column, 
 
    .columns { 
 
    margin-left: 4%; 
 
    } 
 
    .column:first-child, 
 
    .columns:first-child { 
 
    margin-left: 0; 
 
    } 
 
    .one-third.column { 
 
    width: 30.6666666667%; 
 
    } 
 
    #importantpeople { 
 
    text-align: center; 
 
    } 
 
    #manager-1 { 
 
    font-weight: 500; 
 
    text-align: left; 
 
    margin-left: -2px; 
 
    display: inline-block; 
 
    text-align: left; 
 
    } 
 
    #manager-2 { 
 
    font-weight: 500; 
 
    text-align: center; 
 
    display: inline-block; 
 
    text-align: center; 
 
    } 
 
    #manager-3 { 
 
    font-weight: 500; 
 
    text-align: right; 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
    text-align: right; 
 
    }

<div class="container"> 
 
    <div class="row"> 
 
    <div id="seven columns" id="seven-cols"> 
 
     <h4 id="aboutus">About Us</h4> 
 
     <p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our clients. 
 
     If you want to be apart of this movement then sign up now!</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row" id="importantpeople"> 
 
    <h4 id="managers-head">Our Managers</h4> 
 
    <div class="one-third.column" id="screamer"> 
 
    </div> 
 
    <div class="one-third.column" id="kinzu"> 
 
    </div> 
 
    <div class="one-third.column" id="swezii"> 
 
    </div> 
 
    <h5 id="manager-1">Screamer</h5> 
 
    <h5 id="manager-2">KINZU</h5> 
 
    <h5 id="manager-3">Swezii</h5> 
 
    <p>Just a guy chilling on his computer creating works of art for people</p> 
 
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p> 
 
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p> 
 
    </div> 
 
</div>

所以我的問題是，如何我對齊#screamer向左，#kinzu市中心和#swezii到右邊時，它是在同一線？

Answer 1

使用浮動：左爲＃經理-1和浮動：權爲＃經理-3。 這將可恥的拉到左邊，Swezii拉到右邊，而KINZU在中心。

#manager-1 { 
    font-weight: 500; 
    float: left; 
    margin-left: -2px; 
    display: inline-block; 
    text-align: left; 
} 

#manager-2 { 
    font-weight: 500; 
    text-align: center; 
    display: inline-block; 
    text-align: center; 
} 

#manager-3 { 
    font-weight: 500; 
    float: right; 
    margin-right: 10px; 
    display: inline-block; 
    text-align: right; 
} 

Answer 2

將邊距改爲20％，並反轉設置爲的方向，確保對邊距使用％not px。

#manager-1 { 
    font-weight: 500; 
    text-align: left; 
    margin-right: 20%; 
    display: inline-block; 
    text-align: left; 
    } 
#manager-2 { 
    font-weight: 500; 
    text-align: center; 
    display: inline-block; 
    text-align: center; 
    } 
#manager-3 { 
    font-weight: 500; 
    text-align: right; 
    margin-left: 20%; 
    display: inline-block; 
    text-align: right; 
    } 

Answer 3

的問題是，你的one-third.column類有一個週期，在你的CSS樣式時，他們可能會造成一些問題。即使您通過執行以下操作來逃避期間：one-third\.column它仍然可能導致瀏覽器兼容性問題。我改變了類名one-third-column並賦予它下面的CSS規則：

.one-third-column { 
    width: 30.6666666667%; 
    display: inline-block; 
    } 

這裏是一個解決方案，適當地對齊列的jsfiddle。 http://jsfiddle.net/hr1bb64n/1/