如下圖所示，使用float設(shè)置后，發(fā)現(xiàn)元素沒有在一行上居中對(duì)齊顯示，求解大牛~對(duì)應(yīng)html如下：<header class="public-header">?? ??? ?<div class="container">?? ??? ??? ?<div class="header-logo"> ?? ??? ??? ??? ?<img src="images/logo.png" alt="logo"> ?? ??? ??? ?</div> ?? ??? ??? ?<div class="header-follow">?? ??? ??? ??? ?<button type="button"><span>關(guān)注</span></button>?? ??? ??? ??? ?<span>粉絲</span>?? ??? ??? ??? ?<span>45</span>?? ??? ??? ?</div> ?? ??? ??? ??? ? ?? ??? ?<ul class="header-nav">?? ? ?? ??? ??? ?<li class="item"><a href="#">網(wǎng)易公開課</a></li>?? ? ?? ??? ??? ?<li class="item"><a href="#">云課堂</a></li>?? ? ?? ??? ??? ?<li class="item"><a href="#">中國(guó)大學(xué)MOOC</a></li>?? ? ?? ??? ?</ul>?? ? ?? ??? ?<div class="search">?? ? ?? ??? ??? ?<img src="images/search.png" alt="search">?? ? ?? ??? ?</div>?? ? ?? ?</div>?? ??? ?</header><!-- /header -->對(duì)應(yīng)CSS:.header-logo{?? ?float: left;?? ?margin-right: 30px;}.header-follow{?? ?float: left;?? ?margin-right:15px;}.header-nav li a{?? ?float: left;?? ?margin-left:56px; ?? ?font-size: 16px;}.search{?? ?float: right;?? ?margin-right:15px;}
7 回答
已采納
ChinaCJM
TA貢獻(xiàn)44條經(jīng)驗(yàn) 獲得超84個(gè)贊
可以先將header-logo這個(gè)div設(shè)置為相對(duì)定位，position:relative，然后在設(shè)置margin-top。
.header-logo{
????float:?left;
????margin-right:?30px;
????position:relative;
????margin-top:5xp;????//這個(gè)根據(jù)具體情況調(diào)整
}
qyy2499760117_葉子
TA貢獻(xiàn)188條經(jīng)驗(yàn) 獲得超91個(gè)贊
設(shè)置了浮動(dòng)，居中就沒有用了，這個(gè)你慢慢移動(dòng)吧。
blovetu
TA貢獻(xiàn)319條經(jīng)驗(yàn) 獲得超234個(gè)贊
文字圖片居中對(duì)齊
?header * {vertical-align:middle;}?
文字垂直居中?
line-height:"父級(jí)盒子高度";
你這樣的情況
margin:top,或padding-top,試試
添加回答
舉報(bào)
0/150
提交
取消