CSS對齊導航欄
[英]CSS align nav bar
問題描述
目前文本在底部，我想在中間，所以在鏈接的上方和下方都有相同的空間？？？
什么是正確的CSS呢？
body{ margin:0px; padding:0px; font-family: 'Comfortaa', cursive; text-align:center; } input[type="text"], input[type="password"]{ outline:none; padding:10px; display:block; width:300px; border-radius: 3px; border:1px solid #eee; margin:20px auto; } input[type="submit"]{ padding:10px; color:#fff; background:#0098cb; width:320px; margin:20px auto; margin-top:0px; border:0px; border-radius: 3px; cursor:pointer; } input[type="submit"]:hover{ background:#00b8eb; } .phone{ border-bottom:1px solid #eee; padding:10px 0px; width:100%; overflow: hidden; text-align: right; font-weight: bold; padding-right: 20px; float:right; background-color:#2c2c2f; color: #fff; } .header{ border-bottom:1px solid #eee; padding:10px 0px; width:100%; text-align:left; overflow: hidden; padding-bottom: 20px; } #logo { padding-left: 10px; align-content: left; } .header a{ color:#333; text-decoration: none; margin-left: 20px; } .header a.active { color: red; } .footer { border-top:1px solid #eee; font-size:50%; position: fixed; bottom: 0; width: 100%; }
<!DOCTYPE html> <html> <head> <title</title> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="global.css"> </head> <body> <div class="phone"><a>Freephone: 0800 96 161</a></div> <div class="header"> <img id="logo" src="images\\logo.png" alt="logo"> <a href="index.html">Home</a> <a href="products.html">Products</a></div> <h1></h1> <div class="footer"> <p><b></p> </div> </body> </html>
//編輯以添加完整的代碼供人們查看，這可能會更有用
2 個解決方案
解決方案1
0 2017-04-08 20:37:27
嘗試將列表項的行高設置為與標題相同的高度：
.header{
border-bottom:1px solid #eee;
width:100%;
text-align:left;
overflow: hidden;
height: 40px; /* This same as */
}
.header a{
color:#333;
text-decoration: none;
margin-left: 20px;
line-height: 40px; /* This */
}
body{ margin:0px; padding:0px; font-family: 'Comfortaa', cursive; text-align:center; } input[type="text"], input[type="password"]{ outline:none; padding:10px; display:block; width:300px; border-radius: 3px; border:1px solid #eee; margin:20px auto; } input[type="submit"]{ padding:10px; color:#fff; background:#0098cb; width:320px; margin:20px auto; margin-top:0px; border:0px; border-radius: 3px; cursor:pointer; } input[type="submit"]:hover{ background:#00b8eb; } .phone{ border-bottom:1px solid #eee; padding:10px 0px; width:100%; overflow: hidden; text-align: right; font-weight: bold; padding-right: 20px; float:right; background-color:#2c2c2f; color: #fff; } .header{ border-bottom:1px solid #eee; width:100%; text-align:left; overflow: hidden; height: 40px; /* This same as */ } #logo { padding-left: 10px; align-content: left; } .header a{ color:#333; text-decoration: none; margin-left: 20px; line-height: 40px; /* This */ } .header a.active { color: red; } .footer { border-top:1px solid #eee; font-size:50%; position: fixed; bottom: 0; width: 100%; }
<!DOCTYPE html> <html> <head> <title</title> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="global.css"> </head> <body> <div class="phone"><a>Freephone: 0800 96 161</a></div> <div class="header"> <img id="logo" src="images\\logo.png" alt="logo"> <a href="index.html">Home</a> <a href="products.html">Products</a></div> <h1></h1> <div class="footer"> <p><b></p> </div> </body> </html>
解決方案2
0 已采納 2017-04-08 20:45:08
現在工作正常
<div class="header"> <img id="logo" src="https://s-media-cache-ak0.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" alt="logo"> <a href="index.html">Home</a> <a href="products.html">Products</a> </div>
header{ display: flex; } header a { display: flex; align-items: center; }
如何在CSS中垂直對齊兩個導航欄項目，然后是圖像，然后又是兩個對齊的導航欄項目？
[英]How do I vertically align two nav bar items, then an image and then again two nav bar items in CSS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.