Я хочу, щоб цілий блок був відцентрований у його батьківському елементі, але я хочу, щоб вміст блоку було вирівняно за лівим краєм.
Найкраще служать приклади
На цій сторінці:
мистецтво 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.
This will be centeredне поміщається в один рядок, він обгортає текст і призводить до того, що блок має повну ширину, але текст менше повної ширини, тому, хоча блок відцентрований, це не має значення, оскільки text - це НЕ повна ширина блоку, що містить. Для прикладу зверніться до діаграми 2a stackoverflow.com/questions/8702802/… .
Якщо я вас добре розумію, вам потрібно використати для центрування контейнера (або блокування)
margin-left: auto;
margin-right: auto;
і вирівняти ліворуч його вміст:
text-align: left;
Зазвичай ви повинні використовувати margin: 0 auto на div, як зазначено в інших відповідях, але вам доведеться вказати ширину для div. Якщо ви не хочете вказувати ширину, ви можете використовувати (це залежить від того, що ви намагаєтесь зробити) поля, щось на зразок margin: 0 200px; , це повинно зробити так, щоб ваш вміст здавався таким, ніби він відцентрований, ви також можете побачити відповідь Лею на моє запитання
Я знайшов найпростіший спосіб центрування та вирівнювання тексту за контейнером у такий спосіб:
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>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Це те, що ви шукаєте? 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="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>