2016-11-27 465 views
0

我想在我的div中垂直居中內容。用CSS垂直居中一個元素

HTML:

<div id="header"> 
     <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div> 
     <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div> 
    </div> 

CSS:

@media only screen and (min-width: 768px) { 
     .col-sm-1 {width: 8.33%; float: left;} 
     .col-sm-2 {width: 16.66%; float: left;} 
     .col-sm-3 {width: 25%; float: left;} 
     .col-sm-4 {width: 33.33%; float: left;} 
     .col-sm-5 {width: 41.66%; float: left;} 
     .col-sm-6 {width: 50%; float: left;} 
     .col-sm-7 {width: 58.33%; float: left;} 
     .col-sm-8 {width: 66.66%; float: left;} 
     .col-sm-9 {width: 75%; float: left;} 
     .col-sm-10 {width: 83.33%; float: left;} 
     .col-sm-11 {width: 91.66%; float: left;} 
     .col-sm-12 {width: 100%; float: left;} 


    } 

* { 
    color: #2c2c2c; 
    height: 100%; 
    width: 100%; 
    margin: 0 !important; 
    font-family: 'Raleway'; 
} 

#header { 
    height: 10%; 
    background-color: #2c2c2c; 
    color: #c4c3c3; 
    font-family: 'title'; 
} 

#logo-img { 
    height: 80%; 
    width: auto; 

} 

#logo-img-div { 

} 


#logo-text { 
    color: #c4c3c3; 

} 

我想中心徽標IMG-DIV和標誌文字的內容,但保留那些兩個div上的標題內容的左側。我發現了很多類似的問題,但沒有任何解決方案可行。

+0

[在一個div元素的垂直取向(的可能的複製http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div ) –

回答

0

儘量去除餘量(*)的元素。由於邊距是所有其他元素(包括身體本身)之間的距離,因此不允許您對齊它們。或者你可以有一個利潤率僅爲左,右:

* { 
    color: #2c2c2c; 
    height: 100%; 
    width: 100%; 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
    font-family: 'Raleway'; 
} 

如果你試圖用「頭」的ID垂直居中的DIV試試這個:

#header{ 
    position: relative; 
    top: 40%; 
    height:10% 
    background-color: #2c2c2c; 
    color: #c4c3c3; 
    font-family: 'title'; 
} 

試圖找到高度你的元素的%,所以你可以從50%的測量中減去它們。這使得你的元素將完美居中。 在這種情況下,由於高度設置爲10%,50%會轉換爲10%。

+0

使標題頂部:50%,因爲你把高度設置爲10%。 –

+0

忽略那個評論我寫錯了 - 頂:40%是真正的 –

+0

謝謝!如果我把它放在logo-div-img(不在標題中),它就可以工作。但它不適用於logo-text div(無論是:logo-div-img還是標題)。有關於文本div的具體內容嗎?像線條高度或什麼的? – user3597446

0

使用flex來對齊子項目。哦,你可能不想在的一切上設置高度和寬度爲100%。

@media only screen and (min-width: 768px) { 
 
    .col-sm-1 {width: 8.33%; float: left;} 
 
    .col-sm-2 {width: 16.66%; float: left;} 
 
    .col-sm-3 {width: 25%; float: left;} 
 
    .col-sm-4 {width: 33.33%; float: left;} 
 
    .col-sm-5 {width: 41.66%; float: left;} 
 
    .col-sm-6 {width: 50%; float: left;} 
 
    .col-sm-7 {width: 58.33%; float: left;} 
 
    .col-sm-8 {width: 66.66%; float: left;} 
 
    .col-sm-9 {width: 75%; float: left;} 
 
    .col-sm-10 {width: 83.33%; float: left;} 
 
    .col-sm-11 {width: 91.66%; float: left;} 
 
    .col-sm-12 {width: 100%; float: left;} 
 
} 
 

 
* { 
 
    color: #2c2c2c; 
 
    margin: 0; 
 
    font-family: 'Raleway'; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
#header { 
 
    height: 10%; 
 
    background-color: #2c2c2c; 
 
    color: #c4c3c3; 
 
    font-family: 'title'; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#logo-img { 
 
    height: 80%; 
 
    width: auto; 
 
} 
 

 
#logo-text { 
 
    color: white; 
 
}
<div id="header"> 
 
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div> 
 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div> 
 
</div>