[英]I need help aligning image and links within the same div
我有一個導航欄，其中徽標和鏈接包含在同一div（ .header ）中。 我已經將鏈接居中，但似乎無法使圖像位於同一行上並以鏈接居中。 我已經嘗試了幾種方法，但似乎無法改變任何東西。 提前致謝。
.header { width: 80%; margin: 0 auto; height: 4.375rem; padding: 0 15px; } .header img { width: 30px; } .links { width: 50%; margin: 0 auto; padding: 0; text-align: center; line-height: 4.375rem; } .links a { text-decoration: none; } .links li { width: 50%; display: inline; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="normalize.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <nav class="navbar"> <div class="header"> <ul class="links"> <li><a href="home.html">Text</a></li> <li><a href="link1.html">Text</a></li> <li><a href="link2.html">Text</a></li> <li><a href="link3.html">Text</a></li> <li><a href="link4.html">Text</a></li> <li><a href="link5.html">Text</a></li> </ul> <img src="logo.png"> </div> </nav> </body> </html>
把img放到li嗎？ 還是出於其他需求原因選擇不這樣做？
.header { width: 80%; margin: 0 auto; height: 4.375rem; padding: 0 15px; } .header img { width: 30px; } .links { width: 50%; margin: 0 auto; padding: 0; text-align: center; line-height: 4.375rem; } .links a { text-decoration: none; } .links li { width: 50%; display: inline; }
<nav class="navbar"> <div class="header"> <ul class="links"> <li><a href="home.html">Text</a></li> <li><a href="link1.html">Text</a></li> <li><a href="link2.html">Text</a></li> <li><a href="link3.html">Text</a></li> <li><a href="link4.html">Text</a></li> <li><a href="link5.html">Text</a></li> <li><img src="logo.png"/></li> </ul> </div> </nav>
您需要使用float: [left/right]或display: inline-block 。 目前，您的導航欄已隱含設置為display: block ，它占據了整個寬度。 所有width: 50%您當前設置的width: 50%用來限制導航欄的內容。
在這種情況下，問題不在於圖像，而在於<ul> 。 列表是塊元素，因此默認情況下，以下元素將從下一行開始。 最簡單的解決方法是將<ul>的顯示類型更改為inline-block 。 這樣可以保留您需要的塊方面（居中），但也可以使圖像與列表位於同一行。
.links {
width: 50%;
margin: 0 auto;
padding: 0;
text-align: center;
line-height: 4.375rem;
display: inline-block;
}
我需要幫助在同一個div，CSS HTML中左右對齊文本
[英]I need help aligning text left right and centre in the same div, CSS HTML
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.