18.02.2009 09:08

  1. cbx

    0 ↑
    0 ↓
    Доброго времени суток!

    Есть два подряд идущих блока div один над другим: в первом навигация, во втором - таблица с данными. Навигацию и таблицу хотелось бы видеть отцентрированными по горизонтали в окне браузера.

    Проблема в том, что ширина блока навигации и ширина таблицы непостоянные (и разные), причём если навигация всегда умещается в ширину экрана, то таблица потенциально может иметь как очень маленькую ширину, так и довольно большую (потребуется горизонтальный скроллбар браузера).

    В случае если ширина таблицы меньше ширины экрана, хотелось бы видеть её в центре, а если больше - прижатой к левому краю. Явно ширину div'ов задавать не хотелось бы.

    Нужного мне эффекта я могу добиться с помощью тега <center>, обернув в него оба div'а, но он считается deprecated и предназначен для текста.
  2. Александр Харисов

    0 ↑
    0 ↓

    В css эквивалентом <center> является text-align:center. Чаще использую margin:0 auto; Чтобы понять div-ную верстку пользуйся firebug или webdevelop под firefox или border ставь...

    <html>
<head>
  <style type="text/css">
    div {text-align:center;border:1px solid red;}
    ul {list-style:none;}
    li {display:inline;padding:5px 10px;}
    table {margin:0 auto; border:1px solid green;}
  </style>
</head>
<body>
 <div>
    <ul><li>Some</li><li>menu</li><li>other</li></ul>
 </div>
 <div>
   <table>
     <tr><td>1</td><td>aaaaaaaaaaaaaa</td><td>a</td><td>aaaaaaaaaaa</td></tr>
     <tr><td>2</td><td></td><td></td><td></td></tr>
     <tr><td>3</td><td></td><td></td><td></td></tr>
   </table>
 </div>
</body>
</html>
  3. Вика

    0 ↑
    0 ↓
    1. Если речь не идет исключительно о ЦСС, то для таблицы имеется ее параметр align="center", к-рый ее центрирует в родителе

    2. У блока DIV также имеется аналогичный параметр, но в отличие от таблицы он центрирует не его самого, а содержимое. Следовательно, если в такой блок поместить ваше меню, то оно отцентрируется, при условии, если ширина меню будет "авто"

Внимание! Это довольно старый топик, посты в него не попадут в новые, и их никто не увидит. Пишите пост, если хотите просто дополнить топик, а чтобы задать новый вопрос — начните новый.