如下圖所示，使用float設置后，發現元素沒有在一行上居中對齊顯示，求解大牛~對應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>關注</span></button>?? ??? ??? ??? ?<span>粉絲</span>?? ??? ??? ??? ?<span>45</span>?? ??? ??? ?</div> ?? ??? ??? ??? ? ?? ??? ?<ul class="header-nav">?? ? ?? ??? ??? ?<li class="item"><a href="#">網易公開課</a></li>?? ? ?? ??? ??? ?<li class="item"><a href="#">云課堂</a></li>?? ? ?? ??? ??? ?<li class="item"><a href="#">中國大學MOOC</a></li>?? ? ?? ??? ?</ul>?? ? ?? ??? ?<div class="search">?? ? ?? ??? ??? ?<img src="images/search.png" alt="search">?? ? ?? ??? ?</div>?? ? ?? ?</div>?? ??? ?</header><!-- /header -->對應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貢獻44條經驗 獲得超84個贊
可以先將header-logo這個div設置為相對定位，position:relative，然后在設置margin-top。
.header-logo{
????float:?left;
????margin-right:?30px;
????position:relative;
????margin-top:5xp;????//這個根據具體情況調整
}
blovetu
TA貢獻319條經驗 獲得超234個贊
文字圖片居中對齊
?header * {vertical-align:middle;}?
文字垂直居中?
line-height:"父級盒子高度";
你這樣的情況
margin:top,或padding-top,試試
- 7 回答
- 0 關注
- 2392 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消