[英]How to make the menu contents center aligned?
I want to make the menu contents center aligned. 我想使菜单内容居中对齐。 I have 2 files: index.html and style.css
我有2个文件:index.html和style.css
HTML [index.html]: HTML [index.html]:
<div id="container">
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="header">
<h1 id="logo">Lorem Ipsum</h1>
</div>
<div class="left">
<div class="content">
<div class="contentHeader"> What is Lorem Ipsum? </div>
<div class="contentBody"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="content">
<div class="contentHeader"> Where does it come from? </div>
<div class="contentBody"> Contrary to popular belief, Lorem Ipsum is not simply random text. </div>
</div>
</div>
<div class="center">
<div class="content">
<div class="contentHeader"> Where do we use it? </div>
<div class="contentBody"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
</div>
</div>
<div class="right">
<div class="content">
<div class="contentHeader"> Where do we use it? </div>
<div class="contentBody"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
</div>
</div>
</div>
CSS [style.css]: CSS [style.css]:
ul {
list-style-type: none;
margin: auto;
padding: 0;
}
a {
text-decoration: none;
display: block;
width: 80px;
height: 30px;
padding: 10px 10px 10px 10px;
color: white;
font-weight: bold;
text-align: center;
}
a:hover { background-color: #16a085; }
li {
float: left;
font-family: arial;
font-size: 20px;
}
#menu {
background-color: #1abc9c;
height: 50px;
width: 100%;
position: fixed;
z-index: 1;
left: 0px;
top: 0px;
}
#header {
width: 100%;
height: 100px;
background-color: #2ecc71;
position: absolute;
border-radius: 5px;
top: 50px;
}
#container { position: relative; }
#logo {
font-family: arial;
color: #3498db;
padding-left: 20px;
}
.right {
width: 25%;
height: 1000px;
background-color: #2980b9;
border-radius: 5px;
float: right;
margin-top: 160px;
}
.left {
width: 34%;
height: 1000px;
background-color: #f39c12;
border-radius: 5px;
float: left;
margin-top: 160px;
}
.clear { clear: both; }
.content { margin: 30px 30px 30px 30px; }
.contentHeader {
font-family: impact;
color: #bdc3c7;
font-size: 25px;
margin-bottom: 20px;
}
.contentBody {
font-family: arial;
color: #ecf0f1;
font-size: 15px;
margin-bottom: 20px;
}
.center {
width: 38%;
height: 1000px;
background-color: #f39c12;
border-radius: 5px;
margin-top: 160px;
position: absolute;
margin-left: 560px;
}
How can I make the menu items appear at the center? 如何使菜单项出现在中间? It is now appearing in the left.
现在它出现在左侧。
Try this: 尝试这个:
ul
{
list-style-type:none;
margin:auto;
padding:0;
text-align:center;
}
li
{
font-family:arial;
font-size:20px;
display:inline-block;
}
Remove float:left
and add text-align:center
and display:inline-block
删除
float:left
并添加text-align:center
和display:inline-block
Solution-1 解决方案- 1
Add these two properties to your css. 将这两个属性添加到您的CSS。
#menu
{
text-align:center;
}
ul{
display:inline-block;
}
Solution-2 解决方案-2
Add this property to your ul
: 将此属性添加到您的
ul
:
ul{
display:table;
}
If you give the ul
within the menu
div a fixed width, you can apply margin:0 auto;
如果在
menu
div中为ul
指定了固定宽度,则可以应用margin:0 auto;
HTML: HTML:
<div id="menu">
<ul class="centerMargin">
CSS CSS
.centerMargin
{
width:450px;
margin:0 auto;
}
删除此行:
li {float:left}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.