Jak wyrównać tekst pionowo w div?

Próbuję znaleźć najbardziej skuteczny sposób wyrównania tekstu do div. Próbowałem kilku rzeczy i żadna z nich nie działa.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Centrowanie pionowe w CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Podsumowanie artykułu:

W przeglądarce CSS 2 można użyć display:table/ display:table-celldo wyśrodkowania zawartości.

Próbka jest również dostępna w JSFiddle :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Możliwe jest scalanie włamań do starych przeglądarek (Internet Explorer 6/7) w style za pomocą #ukrywania stylów przed nowszymi przeglądarkami:

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Musisz dodać line-heightatrybut, a ten atrybut musi pasować do wysokości div. W Twoim przypadku:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

W rzeczywistości prawdopodobnie można heightcałkowicie usunąć atrybut.

Działa to tylko w przypadku jednego wiersza tekstu , więc bądź ostrożny.

Oto świetny zasób

Od http://howtocenterincss.com/ :

Centrowanie w CSS to ból w dupie. Wydaje się, że istnieje wiele sposobów, aby to zrobić, w zależności od różnych czynników. To konsoliduje je i daje kod potrzebny do każdej sytuacji.

Korzystanie z Flexbox

Oprócz utrzymywania tego postu na bieżąco z najnowszymi technologiami, oto o wiele łatwiejszy sposób na wyśrodkowanie czegoś za pomocą Flexboksa. Flexbox nie jest obsługiwany w Internet Explorerze 9 i starszych .

Oto kilka świetnych zasobów:

• Przewodnik po Flexbox
• Centrowanie elementów za pomocą Flexbox
• Składnia programu Internet Explorer 10 dla Flexbox
• Wsparcie dla Flexbox

JSFiddle z prefiksami przeglądarki

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Inne rozwiązanie

Pochodzi z zerosixthree i pozwala wyśrodkować wszystko za pomocą sześciu linii CSS

Ta metoda nie jest obsługiwana w przeglądarce Internet Explorer 8 i niższych .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Poprzednia odpowiedź

Proste podejście do różnych przeglądarek, przydatne jako linki w zaznaczonej odpowiedzi są nieco nieaktualne.

Jak wyśrodkować tekst w pionie i poziomie zarówno na liście nieuporządkowanej, jak i div, bez uciekania się do wysokości linii JavaScript lub CSS . Bez względu na to, ile masz tekstu, nie będziesz musiał stosować żadnych specjalnych klas do określonych list lub div (kod jest taki sam dla każdej). Działa to we wszystkich głównych przeglądarkach, w tym Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera i Safari. Istnieją dwa specjalne arkusze stylów (jeden dla Internet Explorera 7 i drugi dla Internet Explorera 6), aby pomóc im ze względu na ograniczenia CSS, których nie mają współczesne przeglądarki.

Andy Howard - Jak wyśrodkować tekst w pionie i poziomie na nieuporządkowanej liście lub div

Ponieważ nie dbałem zbytnio o Internet Explorer 7/6 w ostatnim projekcie, nad którym pracowałem, użyłem nieco uproszczonej wersji (tj. Usunąłem rzeczy, które sprawiły, że działał w Internet Explorerze 7 i 6). Może być przydatny dla kogoś innego ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

To jest łatwe display: flex. Następująca metoda divspowoduje wyśrodkowanie tekstu w pionie:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

A jeśli chcesz, poziome:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Musisz zobaczyć potrzebną wersję przeglądarki; w starych wersjach kod nie działa.

Używam następujących elementów do łatwego centrowania elementów losowych w pionie:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Spowoduje to wyśrodkowanie tekstu w moim divdo dokładnie pionowego środka zewnętrznej strony o wysokości 200 pikseli div. Pamiętaj, że może być konieczne użycie prefiksu przeglądarki (jak -webkit-w moim przypadku), aby działało to w przeglądarce.

Działa to nie tylko dla tekstu, ale także dla innych elementów.

Możesz to zrobić, ustawiając wyświetlanie na „komórkę tabeli” i stosując vertical-align: middle;:

    {
        display: table-cell;
        vertical-align: middle;
    }

Nie jest to jednak obsługiwane przez wszystkie wersje programu Internet Explorer zgodnie z tym fragmentem, który skopiowałem z http://www.w3schools.com/cssref/pr_class_display.asp bez pozwolenia.

Uwaga: Wartości „inline-table”, „table”, „table-caption”, „table-cell”, „table-column”, „table-column-group”, „table-row”, „table-row” -group ”i„ dziedziczenie ”nie są obsługiwane przez program Internet Explorer 7 i wcześniejsze wersje. Internet Explorer 8 wymaga! DOCTYPE. Internet Explorer 9 obsługuje wartości.

Poniższa tabela pokazuje dozwolone wartości wyświetlania również z http://www.w3schools.com/cssref/pr_class_display.asp .

Obecnie (nie potrzebujemy już Internet Explorera 6-7-8) po prostu użyłbym CSS display: tabledo tego problemu (lub display: flex).

W przypadku starszych przeglądarek:

Stół:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Zgiąć:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

To (właściwie było) moje ulubione rozwiązanie tego problemu (prosta i bardzo dobrze obsługiwana przeglądarka):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Spróbuj tego, dodaj div div:

display: flex;
align-items: center;

Oto rozwiązanie, które najlepiej działa w przypadku pojedynczego wiersza tekstu.

Może także działać z tekstem wielowierszowym z pewnymi poprawkami, jeśli znana jest liczba linii.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Oto JSFiddle .

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Możesz wyrównać tekst do środka w pionie wewnątrz div za pomocą Flexbox.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

Możesz dowiedzieć się więcej na ten temat w Kompletnym przewodniku po Flexbox .

Sprawdź to proste rozwiązanie:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Istnieje prostszy sposób na wyrównanie zawartości w pionie bez uciekania się do tabeli / komórki-komórki:

http://jsfiddle.net/bBW5w/1/

Dodałem w nim niewidoczny (szerokość = 0) div, który zakłada całą wysokość kontenera.

Wygląda na to, że działa w Internet Explorerze i Firefoksie (najnowsze wersje). Nie sprawdzałem w innych przeglądarkach

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

I oczywiście CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Jest to najczystsze rozwiązanie, jakie znalazłem (Internet Explorer 9+) i dodaje naprawę problemu „wyłączony o .5 pikseli”, wykorzystując transform-styleinne pominięte odpowiedzi.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Źródło: Wyrównaj wszystko w pionie za pomocą zaledwie 3 linii CSS

Proste rozwiązanie elementu nie znających wartości:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Zgodnie z odpowiedzią Adama Tomata przygotowano przykład JSFiddle do wyrównania tekstu w div :

<div class="cells-block">    
    text<br/>in the block   
</div>

za pomocą display: flex w CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

z innym przykładem i kilkoma objaśnieniami w poście na blogu .

Automatyczny margines na elemencie siatki.

Podobnie jak Flexbox, zastosowanie automatycznego marginesu na elemencie siatki wyśrodkowuje go na obu osiach:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Flexbox działał dla mnie idealnie, centrując wiele elementów wewnątrz rodzica div poziomo i pionowo.

Kod HTML:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

Kod CSS:
Poniższy kod układa wszystkie elementy wewnątrz div-parent w kolumnie, centrując elementy poziomo i pionowo. Użyłem div-child, aby utrzymać dwa elementy Anchor w tej samej linii (rzędzie). Bez elementu podrzędnego wszystkie trzy elementy (zakotwiczenie, zakotwiczenie i akapit) są ułożone jeden na drugim w kolumnie nadrzędny element div. Tutaj tylko child-div jest ułożony w kolumnie parent-div.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Posługiwać się:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

Dzięki tej sztuczce możesz wyrównać wszystko, jeśli nie chcesz, aby wyśrodkowywał „lewy: 0”, aby wyrównać do lewej.

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Korzystając z Flex, uważaj na różnice w renderowaniu przeglądarek.

Działa to dobrze zarówno w przeglądarce Chrome, jak i Internet Explorer:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Porównaj z tym, który działa tylko z Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

Jest to kolejna odmiana divw divstrukturze z wykorzystaniem calc()CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

To działa, ponieważ:

• position:absolutedo dokładnego umieszczenia w divciągudiv
• my znać wysokość wewnętrzna divponieważ możemy ustawić go 20px.
• calc(50% - 10px)za 50% - połowa wysokości do wyśrodkowania wnętrzadiv

Działa to dobrze:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Bez i ze znacznikiem obrazu <mat-icon>(który jest czcionką).

Hmm, jest oczywiście wiele sposobów na rozwiązanie tego.

Ale mam <div>pozycję absolutnie height:100%(właściwie top:0;bottom:0i stałą szerokość) i display:table-cellpo prostu nie działałem, aby wyśrodkować tekst w pionie. Moje rozwiązanie wymagało wewnętrznego elementu rozpiętości, ale widzę też wiele innych rozwiązań, więc równie dobrze mogę je dodać:

Mój kontener to a .labeli chcę, aby liczba była w nim wyśrodkowana pionowo. Zrobiłem to, pozycjonując absolutnie top:50%i ustawiającline-height:0

<div class="label"><span>1.</span></div>

A CSS wygląda następująco:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Zobacz to w akcji: http://jsfiddle.net/jcward/7gMLx/

Możesz użyć css flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Za pomocą siatki CSS zrobiłem to dla mnie:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Spróbuj osadzić element tabeli.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Istnieje kilka sztuczek, aby wyświetlić zawartość lub obraz w środku div. Niektóre odpowiedzi są naprawdę miłe i ja też w pełni się z nimi zgadzam.

Absolutne centrowanie poziome i pionowe w CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Istnieje ponad 10 technik z przykładami . Teraz to zależy od Ciebie, który wolisz.

Bez wątpienia, display:table; display:table-Cell jest to lepsza sztuczka.

Oto kilka dobrych sztuczek:

Sztuczka 1 - Używając display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

Kod CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Trick 2 - Za pomocą display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

Kod CSS

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

Trick 3 - Za pomocą position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

Dodaj tę klasę do elementu zawierającego rzeczy, które chcesz wyrównać w pionie

Jeśli chcesz korzystać z tej min-heightwłaściwości, musisz dodać ten CSS na:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}