2015-05-04 96 views
-1

所以我无法弄清楚如何将文本居中(我在谈论“看看谁是马修”和“查看他的简历”等等......我可以将它横向居中,但不能垂直居中。吮吸当谈到中心在div的文本,所以任何帮助,将不胜感激谢谢我的代码如下:!如何将此文本居中?

#nav { 
 
padding:0px; 
 
margin-top: 200px; 
 
border-radius: 10px; 
 
left: 0; 
 
width: auto; 
 
position: absolute; 
 
height: auto; 
 
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
 
} 
 

 
#nav li { 
 
position: relative; 
 
list-style: none; 
 
width: auto; 
 
border-top: 1px solid black; 
 
} 
 

 
#nav li span{ 
 
transition: all 1s; 
 
position: absolute; 
 
top: 0; 
 
left: -300px; 
 
display: block; 
 
width: 300px; 
 
height: 100%; 
 
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
 
z-index: -1; 
 
border-radius: 10px; 
 
color: white; 
 
font-size: 20px; 
 
text-align: center; 
 
padding: 0px; 
 
} 
 

 
#nav li #spectab{ 
 
transition: all 1s; 
 
position: absolute; 
 
top: 0; 
 
left: -300px; 
 
display: block; 
 
width: 175px; 
 
height: 100%; 
 
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
 
z-index: -1; 
 
border-radius: 10px; 
 
color: white; 
 
font-size: 20px; 
 
text-align: center; 
 
padding: 0px; 
 
overflow: hidden; 
 
} 
 

 
#nav li #spectab2{ 
 
transition: all 1s; 
 
position: absolute; 
 
top: 0; 
 
left: -300px; 
 
display: block; 
 
width: 130px; 
 
height: 100%; 
 
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
 
z-index: -1; 
 
border-radius: 10px; 
 
color: white; 
 
font-size: 20px; 
 
text-align: center; 
 
padding: 0px; 
 
overflow: hidden; 
 
} 
 

 
#nav li #spectab:hover a{ 
 
background-color: black; 
 
} 
 

 
#nav li #spectab2:hover a { 
 
background-color: black; 
 
} 
 

 
#nav li:hover span{ 
 
left: 200px; 
 
} 
 

 
#nav li:hover #spectab { 
 
left: 125px; 
 
} 
 

 
#nav li:hover #spectab2 { 
 
left: 315px; 
 
} 
 

 
#nav li a { 
 
position: relative; 
 
display: block; 
 
text-decoration: none; 
 
font-size: 15px; 
 
font-weight: bold; 
 
color: white; 
 
text-align: center; 
 
padding: 15px; 
 
} 
 

 
#nav li:hover { 
 
background-color: black; 
 
border-radius: 2px; 
 
} 
 

 
#nav li a:hover { 
 
color: #778899; 
 
display: block; 
 
padding: 15px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Matthew</title> 
 
\t \t <link href="style2home.css" rel="stylesheet" type="text/css"/> 
 
\t </head> 
 
\t <body> 
 
\t \t <ul id="nav"> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="web2home.html">HOME</a> 
 
\t \t \t \t <span>See who Matthew is</span> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="web2cv.html">CV</a> 
 
\t \t \t \t <span>View his current Curriculum Vitae</span> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="#">RESEARCH</a> 
 
\t \t \t \t <span id="spectab"><a href="#">Current work</a></span> 
 
\t \t \t \t <span id="spectab2"><a href="#">Presentations</a></span 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="web2con.html">CONTACT</a> 
 
\t \t \t \t <span>Send an email directly to Matthew</span> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </body> 
 
</html>

+1

的可能重复[如何对齐文本与CSS DIV垂直居中?(http://stackoverflow.com/questions/8865458/how-to-align-文本垂直中心在与div的Css) – Oka

+1

请[阅读](http://stackoverflow.com/help/mcve)关于如何做出最小和清晰的例子。 – Docteur

+0

在隐藏东西之前获得基本的造型。乍一看你的例子看起来不错。不得不互动以查看错误是一种痛苦。 –

回答

1

你可以在元素的CSS使用此要中心:

.center{left:25%;width:50%;height:50%;top:25%;background:#f0f;position:absolute;text-align:center;} 

明显调整百分比。

的信息:所以你们看到这一点:Centering Things