CSS: Center block, but align contents to the left
Chcę, aby cały blok był wyśrodkowany w jego 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 (tak jak się wydaje), ale powinna wyglądać jak "YAML".
LUB to :
Komunikat o błędzie powinien być ustawiony tak, jak w konsoli.
8 answers
Najpierw Utwórz rodzica div
, który wyśrodkuje jego zawartość potomną za pomocą text-align: center
. Następnie utwórz potomek div
, który używa display: inline-block
, aby dostosować się do szerokości potomków i text-align: left
, aby zawartość, którą przechowuje, wyrównała się do lewej zgodnie z życzeniem.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-10 23:07:30
Reposting odpowiedzi roboczej z innego pytania: Jak poziomo wyśrodkować element pływający o zmiennej szerokości?
Zakładając, że element, który jest pływany i będzie wyśrodkowany, jest 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%;
}
Tutaj jest dobre odniesienie do tego http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:03:02
Jeśli dobrze cię rozumiem, musisz użyć do wyśrodkowania kontenera (lub zablokowania)
margin-left: auto;
margin-right: auto;
I do lewej align jest zawartość:
text-align: left;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-08-13 01:37:05
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-08-13 01:40:27
Normalnie powinieneś użyć margin: 0 auto na div, jak wspomniano w innych odpowiedziach, ale musisz określić szerokość dla div. Jeśli nie chcesz określić szerokości, Możesz również (to zależy od tego, co próbujesz zrobić) użyć marginesów, coś w stylu margin: 0 200px;, to powinno sprawić, że Twoja treść będzie wyglądać tak, jakby była wyśrodkowana, możesz również zobaczyć odpowiedź Leyu na moje pytanie
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:26
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-03 18:21:03
Znalazłem najprostszy sposób na wyśrodkowanie i wyrównanie tekstu do lewej strony wewnątrz kontenera jest następujący:
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 to jest to, czego szukałeś, ponieważ zajęło mi sporo szukania, aby dowiedzieć się tego dość podstawowego rozwiązania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-06 11:21:30
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-19 11:02:54