Как отцентровать содержимое по вертикали?

maximuz · April 26, 2010

Никак не могу отцентровать содержимое по вертикали.

Можно превратить <a> в table-cell, тогда можно будет использовать vertical-align: middle;

Будет работать в FF, Opera, Safari, IE8. Но как заставить встать по центру в IE6 и IE7.

Ниже пример который хотелось бы обуздать. У кого есть опыт, подсобите!

http://dc133.file.qip.ru/img/127077842/d59...059&sizeM=7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Vertical align MIDDLE</title>
<style type="text/css">
body {font: 11px Arial, Helvetica, sans-serif;}
ul, li { list-style: none outside none;}
ul {padding: 0;}
li {float: left; background-color:#FFCC99; margin: 0 10px 0 0; width:130px;}
a {display: block; background-color:#FF9900; height: 46px; text-align:center;}
.left {padding-left: 10px;}
.right {padding-right: 10px;}
</style>
</head>
<body>
<ul>
   <li><div class="left"><div class="right"><a href="#">Main page</a></div></div></li>
   <li><div class="left"><div class="right"><a href="#">Products</a></div></div></li>
   <li><div class="left"><div class="right"><a href="#">Interesting article about Mr. Brown</a></div></div></li>
   <li><div class="left"><div class="right"><a href="#">Hallo! How are You?</a></div></div></li>
   <li><div class="left"><div class="right"><a href="#">Feedback</a></div></div></li>   
</ul>
</body>
</html>

Edited April 26, 2010 by maximuz

aseran · April 28, 2010

maximuz said:
Никак не могу отцентровать содержимое по вертикали.
Можно превратить <a> в table-cell, тогда можно будет использовать vertical-align: middle;
Будет работать в FF, Opera, Safari, IE8. Но как заставить встать по центру в IE6 и IE7.
Ниже пример который хотелось бы обуздать. У кого есть опыт, подсобите!
http://dc133.file.qip.ru/img/127077842/d59...059&sizeM=7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Vertical align MIDDLE</title>
<style type="text/css">
body {font: 11px Arial, Helvetica, sans-serif;}
ul, li { list-style: none outside none;}
ul {padding: 0;}
li {float: left; background-color:#FFCC99; margin: 0 10px 0 0; width:130px;}
a {display: block; background-color:#FF9900; height: 46px; text-align:center;}
.left {padding-left: 10px;}
.right {padding-right: 10px;}
</style>
</head>
<body>
<ul>
   <li><div class="left"><div class="right"><a href="#">Main page</a></div></div></li>
   <li><div class="left"><div class="right"><a href="#">Products</a></div></div></li>
   <li><div class="left"><div class="right"><a href="#">Interesting article about Mr. Brown</a></div></div></li>
   <li><div class="left"><div class="right"><a href="#">Hallo! How are You?</a></div></div></li>
   <li><div class="left"><div class="right"><a href="#">Feedback</a></div></div></li>   
</ul>
</body>
</html>

Прочитай эту статью, должно помочь.

http://www.xiper.net/html-and-css-tricks/p...-roditelya.html

Sign In

Как отцентровать содержимое по вертикали?

Question

maximuz

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

aseran

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information