Chcę, aby cały blok był wyśrodkowany w swoim rodzicu, ale chcę, aby zawartość bloku była wyrównana do lewej.
Przykłady służą najlepiej
Na tej stronie :
sztuka ascii powinna być wyśrodkowana (jak się wydaje), ale powinna być wyrównana i wyglądać jak „YAML”.
Albo to :
komunikat o błędzie powinien być wyrównany, tak jak w konsoli.
Odpowiedzi:
Najpierw utwórz rodzica, divktóry wyśrodkuje zawartość podrzędną na text-align: center. Następnie utwórz element potomny div, display: inline-blockktóry dostosowuje się do szerokości swoich elementów podrzędnych i text-align: leftwyrównuje zawartość, którą zawiera, do lewej strony zgodnie z potrzebami.
<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>Ponowne zamieszczenie roboczej odpowiedzi z drugiego pytania: Jak wyśrodkować w poziomie element pływający o zmiennej szerokości?
Zakładając, że element, który jest pływający i zostanie wyśrodkowany, jest elementem div o id = "content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
I zastosuj następujący CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Oto dobre odniesienie dotyczące tego http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
prei „treści” code.
This will be centerednie mieści się w jednej linii, zawija tekst i powoduje, że blok ma pełną szerokość, ale tekst jest mniejszy niż pełna szerokość, więc nawet jeśli blok jest wyśrodkowany, nie ma to znaczenia, ponieważ tekst NIE jest pełną szerokością bloku zawierającego. Aby zapoznać się z przykładem, zobacz diagram 2a na stronie stackoverflow.com/questions/8702802/… .
Jeśli dobrze cię rozumiem, musisz użyć do wyśrodkowania pojemnika (lub bloku)
margin-left: auto;
margin-right: auto;
i wyrównaj zawartość do lewej:
text-align: left;
Zwykle powinieneś użyć margin: 0 auto dla elementu div, jak wspomniano w innych odpowiedziach, ale musisz określić szerokość elementu div. Jeśli nie chcesz określać szerokości, możesz również (zależy to od tego, co próbujesz zrobić) użyć marginesów, na przykład margin: 0 200px; , to powinno sprawić, że Twoje treści będą wyglądały na wyśrodkowane, możesz również zobaczyć odpowiedź Leyu na moje pytanie
Najłatwiejszym sposobem wyśrodkowania i wyrównania tekstu do lewej w kontenerze jest:
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
}
Mam nadzieję, że właśnie tego szukałeś, ponieważ znalezienie tego dość podstawowego rozwiązania zajęło mi sporo czasu.
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Czy tego szukasz? 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>To działa
<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>