LINUX.ORG.RU
решено Форум — Web-development  

[CSS] <div> размером с контент + выравнивание по центру

 


0

1

Здравствуйте!

Не могу сверстать следующую простую вещь.

Нужно сделать <div>, чтобы он по ширине был размером с содержащийся контент, т.е. не разъежжался на всю ширину свободного места.

Чтобы это сделать я пользуюсь свойством:

display: inline-block;

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

margin: 0 auto;

Проблема в том, что если блок имеет свойство «display: inline-block;», то выравнивение по горизонтали не работает ни в одном браузере. А если убрать это свойство и задать фиксированный width, то работает.

Вопрос. Как сделать блок шириной с контент и выровнять его по центру?

Я пробовал заключить блок в еще один блок, но чтобы выровнять его по центру, ему всеравно нужно задать «display: inline-block;» - ведь если этого не сделать, блок получится шириной на все свободное место, и его опять же не выровнеешь по центру.

← [Горю] Где срочно получить хостинг для Joomla ?
2002 Невозможно подключиться к серверу MySQL → 

  <style>
    #content {
      margin:0 auto;
      width:850px;
      display:block;
      border:1px solid black;
    }
  </style>
  
  <div id="content">
    Тут контент.
  </div>

Не?

Noisee
() 
<html>
    <head>
        <style>
            #container {
                text-align: center;
            }
            #div {
                display: inline-block;
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="div">
                Test
            </div>
        </div>
    </body>
</html>

так чтоли?

moot ★★★★
()
Ответ на: комментарий от moot

Плюсую второго товарища (а первого минусую за width:850px;). Правда, говорят, этот text-align: center; работает не во всех браузерах, и надо делать ещё margin: 0 auto 0 auto: 

<html>
    <head>
        <style>
            #container {
                text-align: center;
                margin: 0 auto 0 auto;
            }
            #div {
                display: inline-block;
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="div">
                Test
            </div>
        </div>
    </body>
</html>

SOmni ★★
()
Ответ на: комментарий от SOmni

>Правда, говорят, этот text-align: center; работает не во всех браузерах, и надо делать ещё margin: 0 auto 0 auto:

Он не работает только там, где не работает inline-block. В шестом осле инлайн-блок эмулируется через display: inline + hasLayout.

Yasenfire
()
Ответ на: комментарий от SOmni

> Плюсую второго товарища (а первого минусую за width:850px;). Правда, говорят, этот text-align: center; работает не во всех браузерах, и надо делать ещё margin: 0 auto 0 auto:

Так заработало. Спасиба.

webhamster
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← [Горю] Где срочно получить хостинг для Joomla ?
Web-development
2002 Невозможно подключиться к серверу MySQL →