Tekst środkowy CSS (poziomo i pionowo) wewnątrz bloku div


862

Mam divustawione na display:block( 90px heighti width) i mam w środku trochę tekstu.

Potrzebuję wyrównania tekstu w środku, zarówno pionowo, jak i poziomo.

Próbowałem text-align:center, ale nie robi części poziomej, więc próbowałem vertical-align:middle, ale to nie zadziałało.

Jakieś pomysły?


25
masz na myśli, text-align:centerże nie robi „części pionowej”?
nonpolarity

2
W końcu znalazłem rozwiązanie, które działa z względnymi rozmiarami i bez ustalonych wysokości: stackoverflow.com/a/16195362/1301331
cirrus

3
Bardzo ważna jest umiejętność centrowania / środkowania elementów. Poniższy dokument dał bardzo wyraźny obraz. w3.org/Style/Examples/007/center.en.html
shibualexis

Oto dwie proste metody wyśrodkowania obiektów w divach, w pionie, w poziomie lub w obu (czysty CSS): stackoverflow.com/a/31977476/3597276
Michael Benjamin

Odpowiedzi:


1385

Jeśli jest to jeden wiersz tekstu i / lub obrazu, łatwo to zrobić. Po prostu użyj:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Otóż ​​to. Jeśli może to być wiele linii, jest to nieco bardziej skomplikowane. Ale są rozwiązania na http://pmob.co.uk/ . Poszukaj „wyrównania w pionie”.

Ponieważ są to zwykle hacki lub dodawanie skomplikowanych div ... Zwykle używam do tego tabeli z pojedynczą komórką ... aby uczynić to tak prostym, jak to możliwe.


Aktualizacja na 2020 r .:

Jeśli nie potrzebujesz, aby działał we wcześniejszych przeglądarkach, takich jak Internet Explorer 10, możesz używać Flexboksa. Jest szeroko obsługiwany przez wszystkie obecne główne przeglądarki . Zasadniczo kontener należy określić jako kontener elastyczny wraz z centrowaniem wzdłuż jego osi głównej i poprzecznej:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Aby określić stałą szerokość dla dziecka, która nazywa się „elementem elastycznym”:

#content {
  flex: 0 0 120px;
}

Przykład: http://jsfiddle.net/2woqsef1/1/

Aby zawinąć zawartość, jest to jeszcze prostsze: wystarczy usunąć flex: ...linię z elementu elastycznego i zostanie ona automatycznie owinięta.

Przykład: http://jsfiddle.net/2woqsef1/2/

Powyższe przykłady zostały przetestowane w głównych przeglądarkach, w tym MS Edge i Internet Explorer 11.

Jedna uwaga techniczna, jeśli chcesz go dostosować: wewnątrz elementu elastycznego, ponieważ ten element elastyczny nie jest sam w sobie elastycznym kontenerem, stary sposób CSS inny niż Flexbox działa zgodnie z oczekiwaniami. Jeśli jednak dodasz dodatkowy element elastyczny do bieżącego kontenera elastycznego, dwa elementy elastyczne zostaną umieszczone poziomo. Aby ustawić je pionowo, dodaj flex-direction: column;do elastycznego pojemnika. Tak to działa między kontenerem elastycznym a jego bezpośrednimi elementami potomnymi.

Istnieje alternatywna metoda centrowania: nie określając centerrozkładu na osi głównej i poprzecznej dla pojemnika elastycznego, ale zamiast tego określ margin: autona elemencie elastycznym, aby zajmował całą dodatkową przestrzeń we wszystkich czterech kierunkach i równomiernie rozmieszczone marginesy sprawi, że element flex zostanie wyśrodkowany we wszystkich kierunkach. Działa to z wyjątkiem sytuacji, gdy istnieje wiele elementów Flex. Ta technika działa również w MS Edge, ale nie w Internet Explorerze 11.


Aktualizacja na rok 2016/2017:

Można to zrobić częściej transformi działa dobrze nawet w starszych przeglądarkach, takich jak Internet Explorer 10 i Internet Explorer 11. Może obsługiwać wiele wierszy tekstu:

position: relative;
top: 50%;
transform: translateY(-50%);

Przykład: https://jsfiddle.net/wb8u02kL/1/

Aby zawinąć szerokość:

W powyższym rozwiązaniu zastosowano stałą szerokość dla obszaru zawartości. Aby użyć szerokości owiniętej w folię termokurczliwą, użyj

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Przykład: https://jsfiddle.net/wb8u02kL/2/

Jeśli potrzebna jest obsługa programu Internet Explorer 10, wówczas Flexbox nie będzie działać, a powyższa metoda i line-heightmetoda będzie działać. W przeciwnym razie Flexbox wykonałby zadanie.


58
Teraz jest display: table-celldo tego właściwość, FYI. Użycie tego powoduje, że element zachowuje się jak komórka stołowa i pozwalavertical-align: middle;
Shauna

1
Jeśli korzystasz font:z nich, upewnij się, że umieściłeś go powyżej line-wysokości`.
user1135469,

4
Może to nie działać zgodnie z przeznaczeniem, gdy div zawiera elementy <br/>.
Martin Meeser,

7
Co jeśli mój wzrost w%?
CandleCoder

1
przy takim podejściu tekst musi znajdować się w jednym wierszu, w przeciwnym razie drugi wiersz będzie miał 90px poniżej.
Tomasz Mularczyk,

454

Typowe techniki od 2014 r .:


  • Podejście 1 - transform translateX/ translateY:

    Przykład tutaj / przykład pełnego ekranu

    W obsługiwanych przeglądarkach (większość z nich) możesz użyć top: 50%/ left: 50%w połączeniu z, translateX(-50%) translateY(-50%)aby dynamicznie pionowo / poziomo wyśrodkować element.

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

  • Podejście 2 - metoda Flexbox:

    Przykład tutaj / przykład pełnego ekranu

    W obsługiwanych przeglądarkach ustaw displayelement docelowy na flexi użyj go align-items: centerdo centrowania w pionie i justify-content: centerdo centrowania w poziomie. Po prostu nie zapomnij dodać prefiksów dostawców w celu dodatkowego wsparcia przeglądarki ( patrz przykład ).

    html, body, .container {
        height: 100%;
    }
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

  • Podejście 3 - table-cell/ vertical-align: middle:

    Przykład tutaj / przykład pełnego ekranu

    W niektórych przypadkach należy upewnić się, że wysokość elementu html/ bodyjest ustawiona na 100%.

    Aby wyrównać w pionie, ustaw element nadrzędny width/ heightdo 100%i dodaj display: table. Następnie do elementu podrzędnego, zmień displaysię table-celli dodać vertical-align: middle.

    Aby wyśrodkować w poziomie, możesz dodać, text-align: centeraby wyśrodkować tekst i inne inlineelementy potomne. Alternatywnie możesz użyć margin: 0 autozałożenia, że ​​element jest blockrówny.

    html, body {
        height: 100%;
    }
    .parent {
        width: 100%;
        height: 100%;
        display: table;
        text-align: center;
    }
    .parent > .child {
        display: table-cell;
        vertical-align: middle;
    }

  • Podejście 4 - absolutnie ustawione 50%od góry z przesunięciem:

    Przykład tutaj / przykład pełnego ekranu

    Takie podejście zakłada, że tekst ma znanej wysokości - w tym przypadku 18px. Wystarczy bezwzględnie ustawić element 50%od góry względem elementu nadrzędnego. Użyj margin-topwartości ujemnej stanowiącej połowę znanej wysokości elementu, w tym przypadku - -9px.

    html, body, .container {
        height: 100%;
    }
    .container {
        position: relative;
        text-align: center;
    }
    .container > p {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -9px;
    }

  • Podejście 5 - line-heightmetoda (najmniej elastyczna - nie sugerowana):

    Przykład tutaj

    W niektórych przypadkach element nadrzędny będzie miał stałą wysokość. Aby wyśrodkować w pionie, wystarczy ustawić line-heightwartość elementu podrzędnego równą stałej wysokości elementu nadrzędnego.

    Chociaż to rozwiązanie będzie działać w niektórych przypadkach, warto zauważyć, że nie będzie działać, gdy jest wiele wierszy tekstu - takich jak ten .

    .parent {
        height: 200px;
        width: 400px;
        text-align: center;
    }
    .parent > .child {
        line-height: 200px;
    }

Metody 4 i 5 nie są najbardziej niezawodne. Idź z jednym z pierwszych 3.


8
+1 za kompleksową odpowiedź. Osobiście wolę pierwszą metodę, ponieważ metoda 2 ma mniejsze wsparcie i lubię unikać table-celljak najwięcej.
Harry

4
2. Metoda Flexbox jest jedyną, która działa, jeśli rodzic .containers jest absolutny. 1. metoda sprawia, że ​​rodzic się kurczy z powodu absolutnego .container i 3. metoda po prostu nie działa, podczas gdy .parent ma absolutną pozycję.
Jānis Gruzis,

Flex pracował dla pionowego centrowania tekstu wielowierszowego w przeglądarce Chrome na iPadzie.
Bob

7
Metoda Flexbox jest najlepsza ze wszystkich.
rorykoehler

Podejście 1 kończy się niepowodzeniem, gdy można przewijać.
Vishal Gulati

78

Za pomocą Flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Zaczerpnięte z szybkiej porady: najprostszy sposób na wyśrodkowanie elementów w pionie i poziomie


4
Ostrożnie: nie będzie działać w IE. Musisz dodać display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center.
Florian Wendelborn,

dodaj text-align:centerdla inline-elementów .. takich jak tekst.

Zauważ, że Flexbox ma teraz przynajmniej częściową obsługę w IE 10 i 11 i działa dla 97% użytkowników zgodnie z caniuse . Nie sądzę, aby obsługa przeglądarki była już argumentem przeciwko niemu.
Félix Gagnon-Grenier

28

Dodaj wiersz display: table-cell;do treści CSS dla tego div.

Obsługują tylko komórki tabeli vertical-align: middle;, ale możesz nadać tej definicji [komórka tabeli] div ...

Żywy przykład jest tutaj: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

1
To nie działa, jeśli positionjest absolutne lub naprawione. Zobacz: jsfiddle.net/tH2cc/1636
Aaron Mason

16

Zawsze używam następującego CSS dla kontenera, aby wyśrodkować jego zawartość w poziomie i w pionie.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Zobacz to w akcji tutaj: https://jsfiddle.net/yp1gusn7/


3
^ dlaczego standardy są ważne
Florian Wendelborn,


16

Daj tę klasę CSS docelowemu <div>:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}
<div class="centered">This text is centered horizontally and vertically</div>


2
Naprawdę musisz, a także css grid :) Polecam ten program .
Aminu Kano,

9

Możesz użyć flexwłaściwości u rodzica div i dodać margin:autowłaściwość do elementów potomnych:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

Możesz zobaczyć więcej opcji flextutaj: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


8

Podejście 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello, World!!
</div>

Podejście 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Podejście 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


4
<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

4
# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

6
Czym dokładnie różni się to od innych opublikowanych odpowiedzi?
Josh Crozier

3

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello, World!!
</div>


3
Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.
Sudheesh Singanamalla

1

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>


1

To działa dla mnie (testowane OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Możesz wybrać inne wartości niż 50%. Na przykład 25% do centrum na 25% rodzica.


1
<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Dlaczego dwie odpowiedzi?
Peter Mortensen

1

Możesz wypróbować następujące metody:

  1. Jeśli masz jedno słowo lub jedno zdanie liniowe, poniższy kod może załatwić sprawę.

    Umieść tekst w znaczniku div i podaj mu identyfikator. Zdefiniuj następujące właściwości dla tego identyfikatora.

    id-name {
      height: 90px;
      line-height: 90px;
      text-align: center;
      border: 2px dashed red;
    }

    Uwaga: Upewnij się, że właściwość line-height jest taka sama jak wysokość podziału.

    Wizerunek

    Ale jeśli treść zawiera więcej niż jedno słowo lub wiersz, to nie działa. Będą też chwile, gdy nie będzie można określić rozmiaru podziału w pikselach lub% (gdy podział jest naprawdę mały i chcesz, aby zawartość była dokładnie pośrodku).

  2. Aby rozwiązać ten problem, możemy wypróbować następującą kombinację właściwości.

    id-name {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px dashed red;
    }

    Wizerunek

    Te 3 wiersze kodu ustawiają zawartość dokładnie w środku podziału (niezależnie od wielkości wyświetlacza). „Align-pozycje: center” pomaga w pionie podczas centrowania „usprawiedliwić-content: center” pozwoli poziomo wycentrowany.

    Uwaga: Flex nie działa we wszystkich przeglądarkach. Upewnij się, że dodałeś odpowiednie prefiksy dostawcy dla dodatkowej obsługi przeglądarki.


Opcja 2 działała dla mnie dobrze. Dzięki!
anakron


0

Dostosowywanie wysokości linii w celu uzyskania wyrównania pionowego.

line-height: 90px;

3
Nie będę głosować negatywnie, ponieważ może to być rozwiązanie, ale działa to tylko wtedy, gdy możesz zagwarantować tekst
jednowierszowy

0

To powinna być właściwa odpowiedź. Najczystszy i najprostszy:

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

0

Zastosuj styl:

position: absolute;
top: 50%;
left: 0;
right: 0;

Twój tekst byłby wyśrodkowany niezależnie od jego długości.


0

To działało dla mnie:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

0

Dla mnie było to najlepsze rozwiązanie:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

-1
<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

1
To jest dobry czysty kod. Chociaż możesz dodać ID do tagów div, abyś mógł z nich później skorzystać, jeśli to konieczne.
Amir Md Amiruzzaman,

Dziękuje za twoją sugestię. Tak, zgadzam się, że ID jest przydatne do manipulacji.

2
czy przeczytałeś poprzednie odpowiedzi? czy możesz powiedzieć, co ta odpowiedź dodaje do poprzednich?
Temani Afif,

1
@AmirMdAmiruzzaman czy możesz nam powiedzieć, co jest najczystszą częścią tego kodu :) ... Widzę wbudowane style, które nie są dobre ... również dodanie identyfikatora też nie jest dobrym pomysłem, potrzebujemy zajęć
Temani Afif

1
Duplikat podejścia 1 odpowiedzi Josha
Munim Munna

-1

Naprawdę prosty kod, który działa dla mnie! Tylko jedna linia, a tekst zostanie wyśrodkowany poziomo.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

Dane wyjściowe wyglądają następująco:

Proszę głosować na tę odpowiedź, jeśli działa ona tylko po to, aby poświęcić trochę czasu deweloperom szukającym łatwych rozwiązań. Dzięki! :)


-2

Wypróbuj następujący przykład. Dodałem przykłady dla każdej kategorii: poziomej i pionowej

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html> 

1
pytanie dotyczy wyśrodkowania w poziomie ORAZ w pionie również to rozwiązanie jest już zapewnione wcześniej
Temani Afif
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.