在div中垂直居中的兩個元素我正試著把兩個垂直的中心<p>元素。我在phronz.net但是這些元素仍然被放置在div之上，div下面，在div內的頂部對齊。我會嘗試其他的東西，但這里的大多數問題只是指向那個教程。此片段用于網頁頂部的橫幅。.banner { width: 980px; height: 69px; background-image: url(../images/nav-bg.jpg); background-repeat: no-repeat; /* color: #ffffff; */}.bannerleft { float: left; width: 420px; text-align: right; height: 652px; line-height: 52px; font-size: 28px; padding-right: 5px;}.bannerright { float: right; width: 555px; text-align: left; position: relative;}.bannerrightinner { position: absolute; top: 50%; height: 52px; margin-top: -26px;}<div class="banner"> <div class="bannerleft"> I am vertically centered </div> <div class="bannerright"> <div class="bannerrightinner"> <p>I should be</p> <p>vertically centered</p> </div> </div> <div class="clear"> </div></div>
2 回答
慕村9548890
TA貢獻1884條經驗 獲得超4個贊
桃花長相依
TA貢獻1860條經驗 獲得超8個贊
如何對元素進行垂直、水平或兩者的居中
<div id="container"> <div class="box" id="bluebox"> <p>DIV #1</p> </div> <div class="box" id="redbox"> <p>DIV #2</p> </div></div>
CSS Flexbox方法
#container {
display: flex; /* establish flex container */
flex-direction: column; /* stack flex items vertically */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
border: 1px solid black;}.box {
width: 300px;
margin: 5px;
text-align: center;}.boxflex-direction: columnflex-directionrowflex-direction: row
CSS表與定位方法
body {
display: table;
position: absolute;
height: 100%;
width: 100%;}#container {
display: table-cell;
vertical-align: middle;}.box {
width: 300px;
padding: 5px;
margin: 7px auto;
text-align: center;}用哪種方法.。
極小的代碼；非常有效的 如前所述，對中很簡單，而且很容易( 是有反應的 與浮標和表格不同，它們提供有限的布局容量，因為它們從來就不是用來構建布局的，柔性盒是一種具有廣泛選擇的現代(CSS 3)技術。
瀏覽器支持
- 2 回答
- 0 關注
- 1824 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消