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

Question 1

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.

Question 2

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>

Rozwiń fragment

Question 3

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

Question 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;

Question 5

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

Question 6

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.

Question 7

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

Question 8

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>

Rozwiń fragment

Question 9

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>

Answer 1

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.

Answer 2

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>

Rozwiń fragment

Keavon
źródło

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

Answer 3

5

Jasne i skuteczne. Dziękuję Ci!

fuzzybear3965

Answer 4

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

Answer 5

Proste i piękne! Dzięki

Cesar Bielich

Answer 6

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

Answer 7

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

Paul Tarjan
źródło

Ś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

Answer 8

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

Serge Stroobandt

Answer 9

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

Answer 10

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

Grasper

Answer 11

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;

eKek0
źródło

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

Answer 12

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

Answer 13

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

eKek0

Answer 14

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

eKek0

Answer 15

2

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

Paul Tarjan

Answer 16

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

Waleed Eissa
źródło

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,

Answer 17

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

Answer 18

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

Answer 19

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,

Answer 20

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.

Answer 21

1

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

Bursztyn
źródło

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

Answer 22

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

Paul Tarjan

Answer 23

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

Answer 24

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

Paul Tarjan

Answer 25

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

Amber

Answer 26

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

Answer 27

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>

Rozwiń fragment

Answer 28

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>

Answer 29

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

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

Odpowiedzi: