CSS:Центральный блок, но содержимое выровнять по левому краю
Вопрос
Я хочу, чтобы весь блок был центрирован по его родительскому элементу, но я хочу, чтобы содержимое блока было выровнено по левому краю.
Примеры служат лучше всего
На этой странице :
ascii-изображение должно быть центрировано (как оно выглядит), но оно должно выровняться и выглядеть как «YAML».
Или это :
все сообщения об ошибках должны выстраиваться в линию, как в консоли.
Решение 2
Перепечатка рабочего ответа на другой вопрос: Как центрировать плавающий элемент переменной ширины по горизонтали?
Предполагая, что элемент, который плавает и будет центрирован, является элементом 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
Другие советы
Сначала создайте родителя 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>
Если я вас хорошо понимаю, вам нужно использовать для центрирования контейнера (или блока)
margin-left: auto;
margin-right: auto;
и выровнять его содержимое по левому краю:
text-align: left;
Обычно вы должны использовать маржу:0 auto для div, как упоминалось в других ответах, но вам нужно будет указать ширину div.Если вы не хотите указывать ширину, вы можете (это зависит от того, что вы пытаетесь сделать) использовать поля, что-то вроде поля:0 200 пикселей;, это должно привести к тому, что ваш контент будет выглядеть центрированным. Вы также можете увидеть ответ Лею на мой вопрос
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Это то, что вы ищите?Флексбокс...
.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>
Я обнаружил, что самый простой способ центрировать и выравнивать текст по левому краю внутри контейнера заключается в следующем:
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
}
Надеюсь, это то, что вы искали, поскольку мне потребовалось немало времени, чтобы найти это довольно простое решение.
Это работает
<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>