CSS: Wyśrodkuj blok, ale wyrównaj zawartość do lewej


81

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 :

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 (jak się wydaje), ale powinna być wyrównana i wyglądać jak „YAML”.

Albo 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ć wyrównany, tak jak w konsoli.

Odpowiedzi:


163

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>


5
Jasne i skuteczne. Dziękuję Ci!
fuzzybear3965

11
nie działa, ponieważ jak tylko pojedyncza linia tekstu nie 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 nie ma znaczenia, ponieważ tekst NIE jest pełną szerokością bloku zawierającego. Na przykład patrz diagram 2a w stackoverflow.com/questions/8702802/ ...
user3338098

Proste i piękne! Dzięki
Cesar Bielich

3
@ user3338098 To działa, w twoim przypadku musisz ustawić maksymalną szerokość tekstu, aby blok nie rozwinął się do niepożądanego rozmiaru. Dosłownie po prostu zastosowałem tę samą logikę w mojej pracy i udało mi się uzyskać wykres 1b + 2b.
Mark

20

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


Świetnie sprawdza się również w przypadku „zawijania” bytu prei „treści” code.
Serge Stroobandt

nie działa, ponieważ gdy tylko 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/… .
user3338098

Staraj się unikać wartości ujemnych! Nie będzie działać poprawnie we wszystkich przeglądarkach.
Grasper

4

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;

więc co mam umieścić na moich <pre> i <code>? Próbowałem różnych odmian tego i nie udało mi się.
Paul Tarjan

czy próbowałeś użyć klasy CSS?
eKek0

Możesz również użyć elementu div kontenera dla> pre>
eKek0

2
Próbuję elementu div kontenera, a jedynym sposobem, aby działał, jest stała szerokość (której nie chcę).
Paul Tarjan

2

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


niestety Twoje rozwiązanie tworzy przepełnienie z wymuszonym poziomym paskiem przewijania. Dodanie przepełnienia: ukryte w elemencie nadrzędnym nie jest dobre, ponieważ moje dane wyjściowe mogą być wystarczająco długie, aby uzasadnić pasek przewijania. Przepraszamy :(
Paul Tarjan

Właściwie to nie jest moje rozwiązanie, o czym wspomniałem, ale i tak nie rozumiem, co masz na myśli przez przepełnienie: ukryte wymuszające paski przewijania, powinny ukrywać zawartość, a nie wymuszać paski przewijania.
Waleed Eissa

Rozwiązanie w Twoim poście powoduje poziomy pasek przewijania, ponieważ treść jest faktycznie przesunięta o 50% w prawo. Wymaga to przepełnienia: ukryty do usunięcia, który nie działa dla mnie.
Paul Tarjan,

2

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.


1
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>

nie chcę też szerokości: 400px. możliwe bez tego?
Paul Tarjan

Problem polega na tym, że element blokowy rozszerzy się, aby wypełnić możliwie największą szerokość, chyba że nałożysz na niego ograniczenie.
Amber

więc to, co chcę zrobić, jest niemożliwe?
Paul Tarjan

Może się zdarzyć, że ktoś zna sekret, którego nie jestem świadomy, ale o ile wiem, tak.
Amber

Zgadzam się z Davem. Być może warto spojrzeć na tinyMCE lub inny edytor tekstu sformatowanego, który umożliwia większe dostosowanie niż standardowy obszar tekstowy HTML. Niestety, możesz spędzić dużo czasu z hackerskim wynikiem. Powodzenia!
mkelley33

1

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>


-1

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>

3
Czy możesz wyjaśnić swój kod oraz jego zalety i wady? W ten sposób inni mogą się z tego uczyć, zamiast po prostu kopiować i wklejać coś, co mogą, ale nie muszą w pełni zrozumieć.
Robert
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.