Я хочу, чтобы весь блок был центрирован в его родительском элементе, но я хочу, чтобы содержимое блока было выровнено по левому краю.
Примеры служат лучше всего
На этой странице :
изображение ascii должно быть по центру (как кажется), но оно должно выровняться и выглядеть как "YAML".
Или это :
все сообщение об ошибке должно выровняться, как в консоли.
Сначала создайте родительский div, который центрирует его дочерний контент с text-align: center. Затем создайте дочерний элемент div, который использует display: inline-block для адаптации к ширине своих дочерних элементов и text-align: left для выравнивания содержимого, которое он содержит, по левому краю по желанию.
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
Centered<br />
Content<br />
That<br />
Is<br />
Left<br />
Aligned
</div>
</div>Повторная публикация рабочего ответа на другой вопрос: Как центрировать плавающий элемент переменной ширины по горизонтали?
Предполагая, что элемент, который перемещается и будет центрирован, является div с id = "content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
И примените следующий CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Вот хорошая ссылка на этот http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats.
pre и содержимым code.
- person Serge Stroobandt; 11.10.2015
This will be centered не помещается в одну строку, он обертывает текст и приводит к тому, что блок имеет полную ширину, но текст меньше полной ширины, поэтому даже если блок центрирован, это не имеет значения, поскольку текст НЕ является полной шириной содержащего блока. Для примера обратитесь к диаграмме 2a stackoverflow.com/questions/8702802/.
- person user3338098; 05.05.2016
Если я вас хорошо понимаю, вам нужно использовать для центрирования контейнера (или блока)
margin-left: auto;
margin-right: auto;
и чтобы выровнять его содержимое по левому краю:
text-align: left;
Я нашел самый простой способ центрировать и выровнять текст внутри контейнера по левому краю:
HTML:
<div>
<p>Some interesting text.</p>
</div>
CSS:
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}
Надеюсь, это именно то, что вы искали, так как мне потребовалось немало усилий, чтобы найти это довольно простое решение.
Обычно вы должны использовать margin: 0 auto для div, как упоминалось в других ответах, но вам нужно будет указать ширину для div. Если вы не хотите указывать ширину, вы также можете (это зависит от того, что вы пытаетесь сделать) использовать поля, например, margin: 0 200px; , это должно сделать ваш контент центрированным, вы также можете увидеть ответ Лейу на мой вопрос
Это то, что вы ищите? Flexbox ...
.container{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.inside{
height:100px;
width:100px;
background:gray;
border:1px solid;
}<section class="container">
<section class="inside">
A
</section>
<section class="inside">
B
</section>
<section class="inside">
C
</section>
</section>Для тех из нас, кто все еще работает со старыми браузерами, вот некоторые расширенные возможности обратной совместимости:
<div style="text-align: center;">
<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-align: left;">
Line 1: Testing<br>
Line 2: More testing<br>
Line 3: Even more testing<br>
</div>
</div>Частично вдохновлено этим сообщением: https://stackoverflow.com/a/12567422/14999964.
Это работает
<div style="display:inline-block;margin:10px auto;">
<ul style="list-style-type:none;">
<li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
<li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
<li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
<li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
</ul>
</div>
