2015-05-04 91 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