在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; 
}

来源

2014-09-22 Sagelane

文本对齐：中心在父元素用于定心文本和行高：1.2或相似于p或标题垂直调整 – jan199674 2014-09-22 16:06:25

添加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>

来源

2014-09-22 15:55:42

非常感谢 – Sagelane 2014-09-22 16:02:36

在html/css中水平和垂直居中对齐文本

回答

相关问题