垂直對齊家長內的多個元素

我一直在尋找超過一天的方式來垂直對齊我的流體設計的標題，所以不知道字體大小或spesific像素我的3個div將是相同的高度和內容在他們的同一行中。垂直對齊家長內的多個元素

這是一個fiddle的例子，我現在有這樣你可以理解我需要更好的東西。

這是代碼：

HTML：

<div id="container"> 
<div id="header"> 
    <div id="menu">  
     <a href="#"> 
      <img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" /> 
     </a> 
    </div> 
    <div id="title"> 
     My site title 
    </div> 
    <div id="my_button"> 
     <button id="button">My button</button> 
    </div> 
    <div style="clear: both;"></div> 
</div> 
<div id="content"></div> 
</div>

CSS：

html,body { 
height: 100%; 
font-size: 2vmin; 
} 

#container { 
height: 100%; 
min-height: 100%; 
} 

#header { 
height: 20%; 
padding: 2vmin 0 2vmin 0; 
box-sizing: border-box; 
background: #000000; 
width: 100%; 
} 

#menu{ 
background: #5f5f5f; 
float: left; 
width: 20%; 
text-align: center; 
} 

#title { 
background: #aaaaaa; 
height: 100%; 
float: left; 
font-size: 3vmin; 
width: 60%; 
text-align: center; 
} 

div#my_button { 
background: #cccccc; 
float: right; 
width: 20%; 
} 
button#button { 
color: #aaaaaa; 
border: none; 
} 

#content { 
height: 70%; 
width: 100%; 
background: #eeeeee; 
}

來源

2013-11-15 Dennis

垂直對齊什麼？到容器div？如果是的話，那麼#content div呢？ – Sowmya

3 div將垂直對齊頭部div ...內容div是與我的問題無關的容器的其餘部分，我只是給出了結果的視覺圖片 – Dennis

你可以使用：在僞元素之後解決你的問題。

在你的CSS樣式的#header後添加此

#header:after{ 
height: 100%; 
width: 1px; 
font-size: 0px; 
display: inline-block; 
}

然後取出從#menu，#title花車和#my_buttun div的和應用

display: inline-block; 
vertical-align: middle;

的inline-block的將創建小的差距在這些div之間，但是如果你不給它們應用背景顏色，那就沒問題。

最後：make #my_button寬度：19％;

看這裏：http://jsfiddle.net/D22Ln/5/

來源

2013-11-15 12:04:25

是的，這是訣竅！非常感謝... – Dennis

如果你指的是三個橫的div，設置height: 100%;爲所有這些會做的伎倆。從那裏你只需修改其父元素的大小（目前爲20％），並且它們將自動適應。

http://jsfiddle.net/D22Ln/2/

來源

2013-11-15 10:48:34 Shomz

其實我改變了一下頭部，你會看到我的標題會有更大的字體，我希望標題div中的文本將與按鈕和圖像鏈接的文本對齊。 [New fiddle]（http://jsfiddle.net/muhyee/D22Ln/4/） – Dennis

使用填充頂部將對齊的div中的文本對齊...將補償不同的文本大小。 – Shomz

事實上，但由於我使用流體字體取決於視口，我有填充百分比的問題，不同的字體大小不同意固定填充百分比。任何想法？ – Dennis

如果我理解正確的，你這是也許你在找什麼，我只是複製了我剛纔做了。但測試出來：http://jsfiddle.net/6aE72/1/

通過使用包裝和助手，你將有左，右格大小相同中和助手與垂直對齊

#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;} 
.content { display: table-cell; }

來源

2013-11-15 11:13:50

這FIDDLE可能會幫助您有所幫助。我已經使用了bootstrap框架。重新調整網格的大小RESULT。

來源

2013-11-15 11:33:24

沒有抱歉，我不想要一個固定大小的標題，這就是我的問題所在。 – Dennis

垂直對齊家長內的多個元素

回答

相關問題