製作DIV響應和控制文本對齊

我有以下佈局（父DIV兩個孩子的div）製作DIV響應和控制文本對齊

想使這個佈局響應的瀏覽器的寬度，所以任何時候用戶改變瀏覽器的寬度此佈局應占屏幕

還，我想中間的文字內容的同一區域，我已經試過vertical-align: middle;，display: table-cell;

有什麼建議？

Markup here

enter image description here

來源

2013-08-24 Rami Shareef

看在CSS媒體查詢。它們允許你根據瀏覽器的尺寸改變你的CSS。 –

你可以使用bootstrap responsive css來實現這個......它使用@media查詢，這將有助於響應式設計。請參閱http://www.keenthemes.com/preview/ – Raghurocks

這是您的解決方案帶CSS的HTML

<html> 
    <head> 
     <title>test</title> 
     <style> 
    .main{ 
     width:97%; 
     border:1px solid #000; 
     height:100px; 
     padding:1%; 
    } 
    .subone{ 
     width:30%; 
     border:1px solid #000; 
     float:left; 
     height:100px; 
     margin-right:2%; 
    } 
    .subtwo{ 
     width:67%; 
     border:1px solid #000; 
     float:left; 
     height:100px; 
    } 
     </style> 
    </head> 
    <body> 
     <div class="main"> 
     <div class="subone"> 
     </div> 
     <div class="subtwo"> 
     </div> 
     </div> 
    </body> 
    </html>

來源

2013-08-24 09:43:00

我已經創建了一個流體佈局，你的div。您不需要使用媒體查詢。

並且還要用

vertical-align:middle;

你必須把

display:table;

父DIV，你一定不能浮裏面的div。

您可以檢查此example

來源

2013-08-24 10:00:18 psd2htmldepot

這將有助於???

使用diplay:table;父母和display:table-cell子女..decalare父母寬度百分比與溢出：隱藏;

HTML ::

<div class="parent"> 
<div class="first"></div> 
<div class="second"></div> 
</div>

CSS ::

.parent{ 
display:table; 
width:80%; 
border-spacing:4px; 
border:2px solid black; 
overflow:hidden; 
} 
.first{ 
text-align:center; 
display:table-cell; 
border:2px solid black; 
width:100px; 
height:200px; 
} 
.second{ 
text-align:center; 
display:table-cell; 
border:2px solid black; 
height:200px; 
}

FIDDLE

來源

2013-08-24 10:29:37

製作DIV響應和控制文本對齊

回答

相關問題