2015-05-04 2 views
-1

Так что я не могу понять, как центрировать этот текст (я говорю о «Смотрите, кто есть Мэтью» и «Посмотреть его биографию» и т. Д. ... Я могу сосредоточить его горизонтально, но не вертикально. сосать, когда дело доходит до центрирование текста в дивы, так что любая помощь будет признателен спасибо Мой код ниже:.!Как мне центрировать этот текст?

#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

возможно дубликат [Как выровнять текст по вертикали центр в DIV с помощью CSS?] (Http://stackoverflow.com/questions/8865458/how-to-align- text-vertical-center-in-div-with-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;} 

Корректировка процентов, очевидно.

Для информации: Смотрите это SO: Centering Things

Смежные вопросы