-1

So I can't figure out how to center this text (I'm talking about the "See who Matthew is" and "View his Curriculum Vitae" etc... I can center it horizontally, but not vertically. I always suck when it comes to centering text in divs, so any help would be appreciated. Thanks! My code is below:

#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>
 <head>
  <title>Matthew</title>
  <link href="style2home.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
  <ul id="nav">
   <li>
    <a href="web2home.html">HOME</a>
    <span>See who Matthew is</span>
   </li>
   <li>
    <a href="web2cv.html">CV</a>
    <span>View his current Curriculum Vitae</span> 
   </li>
   <li>
    <a href="#">RESEARCH</a>
    <span id="spectab"><a href="#">Current work</a></span>
    <span id="spectab2"><a href="#">Presentations</a></span
   </li>
   <li>
    <a href="web2con.html">CONTACT</a>
    <span>Send an email directly to Matthew</span>
   </li>
  </ul>
 </body>
</html>
Snoop2001
  • 25
  • 7
  • 1
    possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) – Oka May 04 '15 at 03:28
  • 1
    Please [read](http://stackoverflow.com/help/mcve) about how to make minimal and clear examples. – Docteur May 04 '15 at 03:40
  • Get your basic styling correct before hiding things. At first glance you example looks fine. Having to interact to see what is wrong is a pain. – Jon P May 04 '15 at 04:56

1 Answers1

1

You could use this in the element's css you want to center :

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

Adjusting the percentages, obviously.

For information : See this SO : Centering Things

Community
  • 1
  • 1