Кроссбраузерное выравниевание блоков по горизонтали

XuLLlHuK · August 29, 2011

Добрый день товарищи!

Подскажите, пожалуйста, статьи или по своему личному опыту, как лучше выравнивать блоки фиксированной ширины по-горизонтали по центру, кроссбраузерно?

К примеру:

имеется внешний блок шириной 1000 пикселей и внутренние блоки по 100 пикселей каждый(рис.)

Решение 1: первая мысль-float


#outer_block{
	background-color:#CCC;
	padding:10 0;
	min-height:280px;
	width:1000px;
}

#outer_block div{
	background-color:#FCC;
	width:100px;
	min-height:200px;
	margin:0 5;
	float:left;
}
<html>
<head>
<title>Тестовая страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <link rel="stylesheet" type="text/css" href="test-styles.css">
</head>

<body>

<div id="outer_block">
    <div> </div>
    <div> </div>
    <div> </div>
</div>

</body>

</html>

но как быть с выравниванием?!

Заранее спасибо!

sigma77 · August 29, 2011

XuLLlHuK,


#outer_block {
  margin: 0 auto;
}

+ не забыть про доктайп

Temiks · August 29, 2011

Если правильно понял, то


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css" >
           #box {
               width: 1000px;
               margin: auto;
               text-align: center;
           }
           #box div {
               display: inline-block;
               width: 100px;
               height: 400px;
               margin: 0 10px;
               background: red;
           }
        </style>
    </head>
    <body>
        <div id="box" >
            <div>text</div>
            <div>text</div>
            <div>text</div>
        </div>
    </body>
</html>

XuLLlHuK · August 29, 2011

+ не забыть про доктайп

он так важен?!

Если правильно понял, то


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css" >
           #box {
               width: 1000px;
               margin: auto;
               text-align: center;
           }
           #box div {
               display: inline-block;
               width: 100px;
               height: 400px;
               margin: 0 10px;
               background: red;
           }
        </style>
    </head>
    <body>
        <div id="box" >
            <div>text</div>
            <div>text</div>
            <div>text</div>
        </div>
    </body>
</html>

Да, оно!.. но inline-block в IE8 не работает(я не знаю как в предыдущих версиях).

sigma77 · August 29, 2011

+ не забыть про доктайп
он так важен?!

Да. Важен.

http://htmlbook.ru/metki/doktaip

Да, оно!.. но inline-block в IE8 не работает(я не знаю как в предыдущих версиях).

В ИЕ8 inline-block работает, если не работает, читайте статьи по ссылке выше.

XuLLlHuK · August 30, 2011

Спасибо помогло!=)

Sign In

Кроссбраузерное выравниевание блоков по горизонтали

Question

XuLLlHuK

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

Temiks

Link to comment

Share on other sites

XuLLlHuK

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

XuLLlHuK

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information