用CSS垂直居中一個元素

Question

我想在我的div中垂直居中內容。

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上的標題內容的左側。我發現了很多類似的問題，但沒有任何解決方案可行。

Answer 1

您正在將屬性應用於所有帶*的選擇器。 http://www.w3schools.com/cssref/css_selectors.asp 由於您的保證金爲0，因此無法對齊div元素。

通常情況下，你可以使用 保證金左或右，並提出數PX的或EM公司的...

Answer 2

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

* { 
    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％。

Answer 3

使用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>