-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>
的可能重複[如何對齊文本與CSS DIV垂直居中?(http://stackoverflow.com/questions/8865458/how-to-align-文本垂直中心在與div的Css) – Oka
請[閱讀](http://stackoverflow.com/help/mcve)關於如何做出最小和清晰的例子。 – Docteur
在隱藏東西之前獲得基本的造型。乍一看你的例子看起來不錯。不得不互動以查看錯誤是一種痛苦。 –