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:

Http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c%2f%7c%7c%0d%0a++%2f%2f+%7c%7c++%7c%7c__%0d%0a&type=python

Sztuka ascii powinna być wyśrodkowana (tak jak się wydaje), ale powinna wyglądać jak "YAML".

LUB to :

Http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23%0d%0a%0d%0a%3f+%5b+New+York+Yankees%2c%0d%0a++++Atlanta+Braves+%5d%0d%0a%3a+%5b+2001-07-02%2c+2001-08-12%2c%0d%0a++++2001-08-14+%5d%0d%0a

Komunikat o błędzie powinien być ustawiony tak, jak w konsoli.

Author: Serge Stroobandt, 2009-08-13
Source

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>
 96
Author: Keavon,
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

 16
Author: Paul Tarjan,
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;
 2
Author: eKek0,
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>
 1
Author: Amber,
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

 1
Author: Waleed Eissa,
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>
 1
Author: Ron Royston,
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.

 0
Author: L.Gaunt,
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>
 -1
Author: user7212232,
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