Jak wyrównać w pionie elementy w div?


792

Mam div z dwoma obrazkami i h1. Wszystkie z nich muszą być wyrównane pionowo w div, obok siebie.

Jeden z obrazów musi być absoluteumieszczony w div.

Czego potrzebuje CSS, aby działał we wszystkich popularnych przeglądarkach?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

14
Zrobiłem listę wszystkich sposobów wyrównywania w pionie. Zostawię ją tutaj: jsfiddle.net/techsin/FAwku/1
Muhammad Umer

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

1
margin-top: auto i margin-bottom: auto (Działa dla wielu przypadków).
CrippledTable

Odpowiedzi:


931

Wow, ten problem jest popularny. Opiera się na nieporozumieniu w vertical-alignnieruchomości. Ten doskonały artykuł wyjaśnia to:

Zrozumienie vertical-alignlub „Jak (nie) wyśrodkować zawartość w pionie” Gavina Kistnera.

„Jak wyśrodkować w CSS” to świetne narzędzie internetowe, które pomaga znaleźć niezbędne atrybuty centrowania CSS w różnych sytuacjach.


W skrócie (i aby zapobiec gniciu linków) :

  • Elementy wbudowane (i tylko elementy wbudowane) można wyrównać w pionie w ich kontekście za pomocą vertical-align: middle. Jednak „kontekst” nie jest całą wysokością kontenera nadrzędnego, lecz wysokością linii tekstu, w której się znajdują. Przykład jsfiddle
  • W przypadku elementów blokowych wyrównanie w pionie jest trudniejsze i silnie zależy od konkretnej sytuacji:
    • Jeśli element wewnętrzny może mieć stałą wysokość , można dokonać jego pozycję absolutei określić jego height, margin-topi toppozycję. przykład jsfiddle
    • Jeśli wyśrodkowany element składa się z jednej linii, a jego wysokość nadrzędna jest stała , wystarczy ustawić kontener tak, line-heightaby wypełnił jego wysokość. Ta metoda jest dość wszechstronna z mojego doświadczenia. przykład jsfiddle
    • … Jest więcej takich specjalnych przypadków.

142
Problem z „prawidłowymi” rozwiązaniami (a więc nie vertical-align: middle) polega na tym, że musisz określić stałą wysokość. Niezbyt możliwe w przypadku elastycznego projektowania stron internetowych .
Emilie

1
Miałem tę strukturę: <div height = "## px"> Mój tekst </ div> Pracowałem dla mnie ustaw linię właściwości Wysokość używając tej samej wartości, co użyta we właściwości div wysokości: '## px' (## ponieważ ta wartość jest dynamiczny w moim przypadku) dziękuję
patricK

8
Działa to również z elementami inline-blocki table-cell. Jeśli masz z tym problemy, spróbuj dostosować line-heightelement kontenera (tj. Kontekst), ponieważ jest on używany w vertical-alignobliczeniach pola liniowego.
Alex W

1
css-tricks.com/centering-css-complete-guide <- kilka dobrych opcji tutaj przedstawionych, jednak przez większość czasu korzystałem z rozwiązania tabeli / komórki-tabeli
shaunhusain

1
To narzędzie (howtocenterincsss.com) jest całkiem niesamowite, ponieważ działało od razu po wyjęciu z pudełka w moim istniejącym CSS! To jest bardzo rzadkie. Pamiętaj o dawnych czasach, kiedy musiałeś kopiować całe arkusze stylów z jakiegoś przykładu, czasem nawet przykładowy HTML, a następnie usuwać i zmieniać nazwy elementów jeden po drugim, aż będzie to, czego potrzebowałem. Nie dotyczy to tej strony!
konstantin

190

Teraz, gdy rośnie obsługa Flexbox, ten CSS zastosowany do elementu zawierającego wyśrodkowałby pionowo zawarty element:

.container {        
    display: flex;
    align-items: center;
}

Użyj prefiksowanej wersji, jeśli chcesz kierować reklamy na Eksploratora 10 i stare (<4.4) przeglądarki Androida:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}

Ładne rozwiązanie, dziękuję. Czy możesz zasugerować, jak sprawić, by Flexbox wyświetlał poziomy pasek przewijania, w przypadku gdy wewnętrzny element jest większy niż pojemnik? (Staram się, aby wewnętrzny element był powiększalny / przewijalny w kontenerze, jak płótno w programie PowerPoint)? Czy to w ogóle możliwe?
Boris Burkov,

1
@YazidErman to rozwiązanie zależy od Flexboksa, więc nie, tylko obsługa IE 10 i nowszych lub jakiejkolwiek innej nowoczesnej przeglądarki caniuse.com/#search=flexbox Flexbox jest świetny tam, gdzie jest obsługiwany, ale nie wszędzie. Tabela wyświetlania i komórka tabeli są prawdopodobnie najlepszym rozwiązaniem, kontener musi być tylko tabelą, element wyśrodkowany jest owinięty elementem z komórką tabeli wyświetlania, a następnie może po prostu wyśrodkować, jak wskazują inne odpowiedzi tutaj.
shaunhusain

1
Dlaczego tak trudno było mi znaleźć>. <Dzięki za odpowiedź! Potwierdzam, że to działa dla mnie w scenariuszu, w którym inna odpowiedź nie zadziałała.
Michael McKenna,

1
Przydatne wskazówki dotyczące sztuczek CSS na Flexboksie, a następnie zajrzyj do align-itemssekcji
icc97

1
W 2020 roku możemy korzystać z Flexbox caniuse.com/#feat=flexbox
tonygatta

116

Użyłem tego bardzo prostego kodu:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Oczywiście, niezależnie od tego, czy używasz a, .classczy an #id, wynik się nie zmieni.


3
Oto pełny przykład wszystkich dziewięciu możliwości wyrównywania (góra-środek-dół i lewo-środek-prawo): jsfiddle.net/webMac/0swk9hk5
webMac

W 2020 roku możemy korzystać z Flexbox caniuse.com/#feat=flexbox
tonygatta

działa idealnie dla mnie
huynq0911

49

To działało dla mnie:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

9
Więc nie jest to już element „blokowy”?
Pacerier,

7
Jeśli więc chcesz wyrównać w poziomie margin : 0 auto, nie zadziała z powodudisplay: table-cell
Ortomala Lokni

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

7
Myślę, że to rozwiązanie jest najszybsze i najłatwiejsze do zrozumienia. Być może to dlatego, że nie byłem wystarczająco cierpliwy, by pogrzebać wybraną odpowiedź. Flexbox wszystkie rzeczy!
modulitos

1
Dodanie justify-content: centernaprawiło mój brak poziomego centrowania
Samuel Slade,

22

Technika mojego przyjaciela:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO tutaj


1
technika ta jest opisana bardziej szczegółowo tutaj: css-tricks.com/centering-in-the-unknown
nerdess

18

Aby ustawić elementy bloku na środku (działa w IE9 i nowszych), potrzebujesz otoki div:

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

2
Ta metoda może powodować rozmycie elementów z powodu umieszczenia elementu na „pół pikselu”. Rozwiązaniem tego jest ustawienie perspektywy elementu. transform: perspektywa (1px) tłumacz Y (-50%);
Simon

16

Wszystkie z nich muszą być wyrównane pionowo w div

Wyrównany jak ? Wierzchołki obrazów wyrównane do góry tekstu?

Jeden z obrazów musi być absolutnie umieszczony w div.

Absolutnie ustawiony względem DIV? Być może mógłbyś naszkicować to, czego szukasz ...?

fd opisał kroki dla bezwzględnego pozycjonowania, a także dostosowania wyświetlania H1elementu tak, aby obrazy pojawiały się razem z nim. Do tego dodam, że możesz wyrównać obrazy za pomocą vertical-alignstylu:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... to połączyłoby nagłówek i obrazy, wyrównując górne krawędzie. Istnieją inne opcje wyrównania; zobacz dokumentację . Korzystne może być również upuszczenie DIV i przeniesienie obrazów wewnątrz H1elementu - zapewnia to wartość semantyczną kontenerowi i eliminuje potrzebę dostosowania wyświetlania H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

15

Użyj tej formuły i zawsze będzie działać bez pęknięć:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>


2
Nigdy nie widziałem w css tego rodzaju selektora „#outer [id]”. Co to powinno zrobić? Co jeśli będę miał klasę zamiast identyfikatora?
Alexa Adrian

12

Prawie wszystkie metody muszą określać wysokość, ale często nie mamy żadnych wysokości.
Oto sztuczka CSS3 3-liniowa, która nie wymaga znajomości wysokości.

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

Jest obsługiwany nawet w IE9.

z prefiksami dostawcy:

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

Źródło: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/


ale wydaje się, że działa to tylko wtedy, gdy wysokość elementu nadrzędnego elementu jest ustalona. właściwość „góra” z wartością procentową działa tylko w kontenerze o stałej wysokości, prawda?
ucdream

Tak, działa tylko w niektórych przypadkach, miałem później problemy z tymi metodami ... Chodzi o to, aby mieć jak najwięcej możliwości i jak tylko potrzebujesz, przetestuj je wszystkie, aż uzyskasz dobrą, ponieważ wszystkie metody Mam rzeczy, które nie działają w konkretnym przypadku ...
Shadoweb

12

Na dwa sposoby można wyrównywać elementy w pionie i poziomie

  1. Bootstrap 4
  2. CSS3

wprowadź opis zdjęcia tutaj

1. Bootstrap 4.3.X

do wyrównania w pionie: d-flex align-items-center

dla wyrównania w poziomie: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>


1
Oba sposoby są w zasadzie takie same, ponieważ Bootstrap używa tych samych atrybutów flex w swoich klasach.
Mx.

Bootstrap to nie magia. Jest objęty tymi samymi ograniczeniami CSS, które dotyczą wszystkich. Po prostu ukrywa to, co robi przed śr. użytkownik.
JasonGenX

10

Moją sztuczką jest wstawienie do div tabeli z 1 rzędem i 1 kolumną, ustawienie 100% szerokości i wysokości oraz właściwości vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/


7
To najlepszy sposób na uniknięcie drapania głowy. Nadal jestem zdezorientowany, dlaczego CSS nie ma standardu wyrównania pionowego.
Kokodoko

5

# 3 sposoby na uczynienie div centrum dziecka w div rodzica

  • Bezwzględna metoda pozycjonowania
  • Metoda Flexbox
  • Metoda przekształcania / tłumaczenia

    wprowadź opis zdjęcia tutaj

    Próbny

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>


4

Używając CSS do pionowego wyśrodkowania, możesz pozwolić zewnętrznym kontenerom zachowywać się jak tabela, a zawartość jako komórka tabeli. W tym formacie twoje obiekty pozostaną wyśrodkowane. :)

Na przykład zagnieździłem wiele obiektów w JSFiddle, ale podstawowa idea jest taka:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Przykład wielu obiektów:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Wynik

Wynik

https://jsfiddle.net/martjemeyer/ybs032uc/1/


3

Domyślnie h1 jest elementem blokowym i będzie renderował się w linii po pierwszym obrazku i spowoduje, że drugi obraz pojawi się w linii po bloku.

Aby temu zapobiec, możesz ustawić h1 tak, aby zachowywał się podczas przepływu:

#header > h1 { display: inline; }

Jeśli chodzi o absolutne pozycjonowanie obrazu wewnątrz div , musisz ustawić zawierający div, aby miał „znany rozmiar”, zanim to zadziała poprawnie. Z mojego doświadczenia wynika, że ​​musisz także zmienić atrybut position na domyślny - position: relative działa dla mnie:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Jeśli możesz to zrobić, możesz spróbować stopniowo usuwać atrybuty wysokości, szerokości i pozycji z div.header, aby uzyskać minimalne wymagane atrybuty, aby uzyskać pożądany efekt.

AKTUALIZACJA:

Oto kompletny przykład, który działa w przeglądarce Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

4
Powinienem zauważyć, że posiadanie odpowiedniego DOCTYPE może czasami mieć duże różnice w sposobie renderowania CSS, szczególnie w Internet Explorerze. Polecam wybranie DOCTYPE znanego z dostosowania do trybu ścisłych standardów, abyś mógł spodziewać się bardziej spójnego zachowania między przeglądarkami.
Mike Tunnicliffe,

2
Nie spodziewałbym się żadnej spójności między przeglądarkami. Jedynym sposobem, aby się upewnić, jest przetestowanie: /
Cocowalla,

3

Możemy użyć obliczenia funkcji CSS, aby obliczyć rozmiar elementu, a następnie odpowiednio ustawić element potomny.

Przykładowy HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

I CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo utworzone tutaj: https://jsfiddle.net/xnjq1t22/

To rozwiązanie działa dobrze z responsywnym div height i widthjak dobrze.

Uwaga: Funkcja calc nie jest testowana pod kątem zgodności ze starymi przeglądarkami.


3

Na dzień dzisiejszy znalazłem nowe obejście polegające na wyrównywaniu w pionie wielu linii tekstowych w div przy użyciu CSS3 (i używam również systemu siatki bootstrap v3 do upiększania interfejsu użytkownika), który jest następujący:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Według mojego zrozumienia bezpośredni rodzic tekstu zawierającego element musi mieć pewną wysokość. Mam nadzieję, że ci to pomoże. Dzięki!


Bardzo czyste rozwiązanie. Ten działał dla mnie ładnie.
Akalonda,

2

Mój nowy ulubiony sposób na zrobienie tego to siatka CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}
<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>


1

Wystarczy użyć tabeli jednokomórkowej w div! Wystarczy ustawić wysokość komórki i tabeli oraz za pomocą do 100% i można użyć wyrównania pionowego.

Stół jednokomórkowy wewnątrz div obsługuje wyrównanie w pionie i jest kompatybilny wstecz z powrotem do epoki kamienia!


0

Używam następującego rozwiązania (bez pozycjonowania i wysokości linii) od ponad roku, działa również z IE 7 i 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

0

To jest moje osobiste rozwiązanie dla elementu i wewnątrz div

Przykład JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

0

Dla mnie działało to w ten sposób:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

Element „a” przekonwertowany na przycisk za pomocą klas Bootstrap i jest teraz wyśrodkowany pionowo w zewnętrznym „div”.


0

używając display flex, najpierw musisz owinąć pojemnik elementu, który chcesz wyrównać.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

następnie zastosuj następujący css, aby otoczyć div lub outdiv w moim przykładzie

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

Odradzane są tylko odpowiedzi na kod. Dodaj wyjaśnienie, w jaki sposób rozwiązuje problem lub jak różni się on od istniejących odpowiedzi. Z recenzji
Nick

-3

Tylko to:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Stół jednokomórkowy wewnątrz div obsługuje wyrównanie w pionie i jest kompatybilny wstecz z powrotem do epoki kamienia!


-3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

-4

Oto kolejne (responsywne) podejście:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/


-4

Jestem facetem .NET, który właśnie zajął się programowaniem internetowym. Nie używałem CSS (cóż, trochę). Użyłem małego kodu JavaScript, aby uzyskać centrowanie pionowe wraz z funkcją .css jQuery.

Po prostu publikuję wszystko z mojego testu. Prawdopodobnie nie jest zbyt elegancki, ale działa do tej pory.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

7
Uczysz nowych programistów stron internetowych, jak postępować źle, HTML służy do definiowania treści, CSS służy do stylizowania HTML, a JavaScript do manipulowania zarówno w czasie wykonywania, w zależności od warunków.
Pomieszanie

-8
<div id="header" style="display: table-cell; vertical-align:middle;">

...

lub CSS

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

Pokrycie przeglądarki


1
Właściwość wyrównania do pionu nie ma zastosowania, ponieważ div jest wyświetlany: domyślnie blokuj i wydaje się, że nic nie zostało zrobione, aby to zmienić.
Quentin,

3
Najwyraźniej wyświetlacz został zaktualizowany table-cell, co sprawia, że vertical-align: middle;działa. Co więcej, działa bez potrzeby zagnieżdżonego div otoki / bufora i działa zarówno dla tekstu, jak i obrazów (lub obu) i nie trzeba zmieniać właściwości pozycji.
MSpreij

3
Ten działa. Zmienia wyświetlanie na komórkę tabeli, która przyjmuje właściwość wyrównania pionowego. Nie mam pojęcia, dlaczego ludzie tak głosują.
texasbruce

1
tak, o ile wiem, jest to najmniej inwazyjny sposób na wyśrodkowanie czegokolwiek w pionie w div. +1
Pma

Ok, może byłem zbyt szybki z moimi wnioskami ... Dodanie wyświetlacza: komórka tabeli łamie margines div i dodatkowo margines jest wyświetlany poza div, granica w połączeniu z promieniem granicy wyświetla zaokrąglone rogi wewnątrz podziałki na zewnątrz
Pma
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.