Czy możliwe jest wyrównanie tekstu w pionie w div? [duplikat]

Andres Ilich ma rację. Na wypadek, gdyby ktoś przegapił jego komentarz...

A.) Jeśli masz tylko jedną linijkę tekstu:

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}

<div>vertically centered text</div>

B.) Jeśli masz kilka linijek tekstu:

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 18px; /* <-- adjust this */
}

<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>

Aktualizacja Kwiecień 10, 2016

Flexboxy powinny być teraz używane do wyrównywania elementów w pionie (lub nawet w poziomie).

<div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

Dobry przewodnik po flexbox można przeczytać na sztuczki CSS. Dzięki Ben (z komentarzy) za wskazanie, nie miałem czasu na aktualizację.

Dobry facet o imieniu Mahendra opublikował bardzo działające rozwiązanie tutaj

Następująca klasa powinna wyśrodkować element poziomo i pionowo do jego rodzica.

.absolute-center {

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}

To stare pytanie, ale przyjęta odpowiedź nie działa w przypadku tekstu wielowierszowego. Zaktualizowałem JSfiddle , aby pokazać tekst wielowierszowy css pionowe wyrównanie Jak wyjaśniono TUTAJ :

<div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

Działa również z <br /> w "yet another..."

Spróbuj tego:

HTML

<div><span>Text</span></div>

CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

To ma po prostu działać:

#column-content {
        --------
        margin-top:auto;
        margin-bottom:auto;
    }

Aby rozwiązanie Omara (lub Mahendry) było jeszcze bardziej uniwersalne, blok kodu w stosunku do Firefoksa należy zastąpić następującym tekstem:

/* Firefox */
display:flex;
justify-content:center;
align-items:center;

Problem z kodem Omara, w przeciwnym razie operacyjny, pojawia się, gdy chcesz wyśrodkować okno na ekranie lub w jego bezpośrednim przodku. Centrowanie to odbywa się poprzez ustawienie jego pozycji na

position: relative; lub position:static; (nie z pozycją: absolutną ani stałą).

A następnie margin: auto; lub margin-right: auto; margin-left: auto;

Jest to najprostszy sposób, aby to zrobić, jeśli potrzebujesz wielu linii. Zawiń span ' D tekst w inny span i określ jego wysokość za pomocą line-height. Sztuczka polega na zresetowaniu wewnętrznych span'S line-height.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

DEMO

Oczywiście zewnętrzny span może być div lub whathaveyou

Dodaj pionowe wyrównanie do css #column-content strong too:

#column-content strong {
    ...
    vertical-align: middle;
}

Zobacz także swój zaktualizowany przykład .

=== Aktualizacja = = =

Z rozpiętością wokół drugiego tekstu i innym wyrównaniem pionowym:

Html:

... <span>yet another text content that should be centered vertically</span> ...

Css:

#column-content span {
    vertical-align: middle;
}

Zobacz także następny przykład .

Wiem, że to całkowicie głupie i zwykle nie powinieneś używać tabel, gdy nie tworzysz tabel, ale: komórki tabeli mogą wyrównywać wiele linii tekstu pionowo, a nawet robić to domyślnie. Więc rozwiązaniem, które działa całkiem dobrze, może być coś takiego:

Html:

<div class="box">
  <table class="textalignmiddle">
    <tr>
      <td>lorem ipsum ...</td>
    </tr>
  </table>
</div>

Css: (aby element tabeli zawsze pasował do pola div)

.box {
  /* for example */
  height: 300px;
}

.textalignmiddle {
  width: 100%;
  height: 100%;
}

Zobacz tutaj: http://www.cssdesk.com/LzpeV