這裏這樣垂直對齊中間問題

.div parent{ 
width:100%; 
height:100%; 
text-align:center; 
} 
.div child{ 
width:10%; 
height:10%; 
}

在響應式網站的移動設備子DIV父DIV不對齊垂直方向的中間我該如何調整？中間請幫助我..

謝謝。

來源

2013-12-18 Anil Vinayak

你可以給你的問題的JS小提琴？ –

垂直對齊與divs很難。如果你能擺脫它，你能把它放在桌子上嗎？桌子垂直對齊很容易。 – man

你已經寫.div parent似乎是一個無效選擇，如果你想選擇一個div與parent類，應該使用div.parent選擇（同樣適用於你的孩子也DIV）。

試試這個;

將diplay:table-cell;應用於.parent div，以便它能夠將其子垂直居中。

然後應用vertical-align:middle到同一讓孩子元素垂直方向的中間

div.parent{ 
    width:100%; 
    height:100%; 
    text-align:center; 
    display:table-cell; 
    vertical-align:middle; 
}

來源

2013-12-18 09:32:33

嘗試增加：

.div parent{ 
vertical-align: middle; 
width:100%; 
height:100%; 
text-align:center; 
}

來源

2013-12-18 09:32:50 Era

FIDDLE

這是一種替代服用，使用CSS表格

HTML

<div class='table'> 
    <div class='row'> 
     <div class='cell'> 
      <div>Child</div> 
     </div> 
    </div> 
</div>

CSS

html, body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.table { 
    display:table; 
    table-layout:fixed; 
    width:100%; 
    height:100%; 
} 
.row { 
    display:table-row; 
} 
.cell { 
    display:table-cell; 
    border:1px solid grey; 
    vertical-align:middle; 
    text-align:center; 
} 
.cell div { 
    background:red; 
    display:inline-block; 
    margin:0 auto; 
}

來源

2013-12-18 09:36:23 SW4

我知道這個職位是舊的，但這裏是Flex另一種方法（也可在CodePen - http://codepen.io/KErez/pen/kXzYAj）：

HTML：

<div class='a'> 
    <div class='b'> 
    Inner 
    </div> 
</div>

CSS（顏色僅用於清楚地顯示框）：

.a { 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    color: #ffffff; 
    background-color: #223344; 
    width: 100%; 
    height: 100%; 
} 

.b { 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    width: 75px; 
    height: 100px; 
    background-color: #999999; 
    color: #00ff00; 
}

來源

2016-08-10 05:53:10

非常簡單的解決方案，我已經使用了很多次。

.a { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color:#666; 
 
} 
 

 
.b { 
 
    margin:auto; 
 
    width: 75px; 
 
    height: 100px; 
 
    top: calc(50% - 50px); 
 
    text-align:middle; 
 
    position: relative; 
 
    background-color:#111; 
 
}

<div class='a'> 
 
    <div class='b'> 
 
    </div> 
 
</div>

來源

2016-09-09 09:22:41 Daut

垂直對齊中間問題

回答

FIDDLE

相關問題