Центрирование CSS/HTML-текста по вертикали

Я создаю веб-страницу, используя CSS, когда у меня возникла проблема. Моя строка меню не центрирует ссылки по вертикали в панели. Это должно быть очень просто, но мне нужна помощь. Извините за то, что так долго, я просто не хотел ничего отпускать.Центрирование CSS/HTML-текста по вертикали

HTML:

<html> 
<head> 
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
<title>noobyDev</title> 
<style> 
body { 
    background-color: CCFFFF; 
    text-align: center; 
} 
div.background 
{ 
    width: 90%; 
    height: 200px; 
    background color: #00FF66; 
    border: 2px solid black; 
    margin: 0 auto; 
    text-align: left; 
} 
div.background h3 
{ 
    margin: 0px 40px; 
} 
div.logo 
{ 
    width: 350px; 
    height: 75px; 
    background: url(logo.png); 
    margin: 30px 40px; 
} 
div.nav 
{ 
    background-color: #00CC66; 
    border: 2px solid black; 
    width: 90%; 
    margin: 0 auto; 
    text-align: left; 
    height: 30px; 
    border-top: 0px solid black; 
} 
.menu 
{ 
    margin: 5px 10px; 
    background: #00CC66; 
    color: black; 
    -webkit-transition: color; 
} 
.menu:hover 
{ 
    color: red; 
} 
div.center 
{ 
    width: 90%; 
    height: 700px; 
    background color: white; 
    border: 2px solid black; 
    border-top: 0px solid black; 
    margin: 0 auto; 
    text-align: left; 
} 
div.column1 h1 
{ 
    margin: 30px 40px; 
} 
div.column1 p 
{ 
    margin: 30px 40px; 
} 
div.column1 
{ 
    width: 70%; 
    height: 100%; 
    float: left; 
    display: block; 
    border-right: 2px solid black; 
} 
div.column2 
{ 
    width: 30% 
    height: 100%; 
    float: left; 
    display: block; 
    text-align: left; 
} 
div.column2 a 
{ 
    margin: 30px 40px; 
    display: block; 
    text-decoration: none; 
    font-size: 30px; 
    font-color: black; 
} 
div.legal 
{ 
    width:90%; 
    height: 50px; 
    background color: white; 
    border: 2px solid black; 
    border-top: 0px solid black; 
    margin: 0 auto; 
    text-align: center; 
} 
</style> 
</head> 
<body> 
<div class="background"> 
<div class="logo"> 
</div> 
<h3>Have you failed today?</h3> 
</div> 
<div class="nav"> 
<a style=text-decoration="none" href="index.html" class="menu">Home</a> 
<a style=text-decoration="none" href="html.html" class="menu">HTML</a> 
<a style=text-decoration="none" href="javascript.html" class="menu">Javascript</a> 
<a style=text-decoration="none" href="css.html" class="menu">CSS</a> 
<a style=text-decoration="none" href="java.html" class="menu">Java</a> 
<a style=text-decoration="none" href="news.html" class="menu">News</a> 
<a style=text-decoration="none" href="games.html" class="menu">Games</a> 
<a style=text-decoration="none" href="other.html" class="menu">Other</a> 
</font> 
</div> 
<div class="center"> 
<div class="column1"> 
<h1>Home</h1> 
<br> 
<p>Welcome to noobyDev.com! This is my site where I document all of my fails and successes worth sharing. Feel free to use them unless otherwise instructed to do so. Check back often and admire my awesomeness!</p> 
</div> 
<div class="column2"> 
<a href="news.html#viral_video">Video?</a> 
</div> 
</div> 
<div class="legal"> 
<p>This site is heavily protected with a gargantuan army of mutant cotton balls; I would recommend not stirring trouble up. Just so you know, this site looks the best in Internet Explorer.</p> 
</div> 
</body> 
</html>

источник

2013-05-21 DHUFF

Просто добавьте line-height в div.nav:

div.nav 
{ 
    background-color: #00CC66; 
    border: 2px solid black; 
    width: 90%; 
    margin: 0 auto; 
    text-align: left; 
    height: 30px; 
    line-height: 30px; 
}

Вот JS Bin для теста: http://jsbin.com/oliwit/1/

источник

2013-05-21 23:02:30

Спасибо. Эта строка отлично справилась с моей задачей – DHUFF

-1

Есть вообще много неправильных представлений о том, как использовать вертикальное выравнивание в CSS, я нашел этот пост очень полезно о том, как получить полное представление о нем ... http://phrogz.net/css/vertical-align/

источник

2013-05-21 23:01:36 user2406160

[Phrogz] (http://stackoverflow.com/users/405017/phrogz) - очень полезный и информативный парень; но даже в этом случае, пожалуйста, суммируйте содержимое внешнего сайта в своем ответе, не просто * ссылку * на ссылку. Объясните ссылку, как это полезно, суммируйте ее, приведите соответствующие/релевантные точки в ваш ответ. –

Центрирование CSS/HTML-текста по вертикали

ответ

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