在html/css中水平和垂直居中对齐文本
问题描述:
我需要垂直和水平对齐文本到导航div的中心。 我将在下面提供HTML和CSS。在html/css中水平和垂直居中对齐文本
以下是代码的HTML部分。
<html>
<head>
</head>
<title>
Dom Chronicles
</title>
<body>
<div id="header">
</div>
<div id="space">
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Music</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
这是代码的CSS部分。
@font-face {
font-family: Mager;
src: url(fonts/ElegantLux-Mager.otf);
}
#header {
width: 1000px;
height: 400px;
margin: 0 auto;
background-color: gray;
}
#space {
width: 1000px;
height: 10px;
}
#nav {
width: 1000px;
height: 50px;
margin: 0 auto;
background-color: gray;
color: black;
font-size: 25px;
font-family: Mager;
}
#nav li {
list-style: none;
display: inline;
text-align: center;
}
#nav li:hover {
opacity: .6;
}
答
添加display: table
和text-align: center
到#nav
元件:
@font-face {
font-family: Mager;
src: url(fonts/ElegantLux-Mager.otf);
}
#header {
width: 1000px;
height: 400px;
margin: 0 auto;
background-color: gray;
}
#space {
width: 1000px;
height: 10px;
}
#nav {
width: 1000px;
height: 50px;
margin: 0 auto;
background-color: gray;
color: black;
font-size: 25px;
font-family: Mager;
display: table;/*Add display table*/
text-align: center;/*Add text-align center*/
}
#nav li {
list-style: none;
display: inline;
text-align: center;
}
#nav li:hover {
opacity: .6;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Music</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
+1
非常感谢 – Sagelane 2014-09-22 16:02:36
文本对齐:中心在父元素用于定心文本和行高:1.2或相似于p或标题垂直调整 – jan199674 2014-09-22 16:06:25