Легкий способ центрирования переменных ширины divs в CSS

Я пытаюсь центрировать Div, которые будут иметь разную ширину (в зависимости от содержимого веб-сайта).

Я читал об относительной технике позиционирования здесь:

http://www.tightcss.com/centering/center_variable_width.htm

Но я думал, что должен быть более простой способ сделать это?

Ответ 1

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

<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>

<div id="hideoverflow">
    <div id="outer">
        <div id="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel  augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo  libero, commodo ut iaculis in, placerat vel purus.
        </div>
    </div>
</div>

Ответ 2

@Talon; вы можете сделать это следующим образом http://jsfiddle.net/sandeep/7PXQF/

CSS

.container{
background-color:red;
    text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}

HTML:

<div class="container">
    <div class="center">
      <p>This is a div with an much wider width, to make the yellow div go off the page to the right.  We'll type a bit more to be sure.</p>
      <p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
    </div>
  </div>