Dlaczego wyrównanie w pionie: środek nie działa na mojej rozpiętości lub div?

Próbuję wyśrodkować pionowo element spanlub divelement w innym divelemencie. Jednak kiedy mówię vertical-align: middle, nic się nie dzieje. Próbowałem zmienić displaywłaściwości obu elementów i wydaje się, że nic nie działa.

Oto, co aktualnie robię na mojej stronie internetowej:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Oto jsfiddle implementacji pokazujący, że nie działa: http://jsfiddle.net/gZXWC/

Wydaje się, że to najlepszy sposób - minęło trochę czasu od mojego oryginalnego postu i teraz należy to zrobić: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Za pomocą CSS3:

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

Css:

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

Uwaga: To może nie działać w starych IE

Wypróbuj to, działa dla mnie bardzo dobrze:

/* 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;

Działa również ustawienie wysokości linii na tej samej wysokości, co zawiera div

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Jeśli nie możesz polegać na Flexbox ... Umieść go .childw .parentśrodku. Działa, gdy rozmiary pikseli są nieznane (innymi słowy zawsze) i nie ma również problemów z IE9 +.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Powinieneś założyć vertical-align: middleelement wewnętrzny, a nie element zewnętrzny. Ustaw line-heightwłaściwość na elemencie zewnętrznym, aby pasowała do heightwłaściwości elementu zewnętrznego. Następnie ustaw display: inline-blocki line-height: normalna elemencie wewnętrznym. W ten sposób tekst na elemencie wewnętrznym zostanie zawinięty z normalną wysokością linii. Działa w Chrome, Firefox, Safari i IE 8+

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

Skrzypce

Użyłem tego, aby wyrównać wszystko na środku div otoki opakowania, na wypadek, gdyby komukolwiek to pomogło - uznałem to za najprostsze:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Oto przykład dwóch sposobów wyrównywania w pionie. Używam ich i działają całkiem dobrze. Jeden wykorzystuje pozycjonowanie bezwzględne, a drugi korzysta z Flexbox .

Przykład wyrównywania w pionie

Używając flexbox, możesz wyrównać element wewnątrz innego elementu za display: flex;pomocą align-self. Jeśli chcesz wyrównać go również w poziomie, możesz użyć align-itemsiw justify-contentpojemniku.

Jeśli nie chcesz używać Flexboksa, możesz użyć właściwości position. Jeśli uczynisz kontener względnym, a zawartość absolutnym, zawartość będzie mogła swobodnie się poruszać wewnątrz kontenera. Więc jeśli użyjesz top: 0;i left: 0;w treści, zostanie ona umieszczona w lewym górnym rogu kontenera.

Następnie, aby go wyrównać, wystarczy zmienić górne i lewe odniesienia na 50%. Spowoduje to umieszczenie zawartości w centrum kontenera od lewego górnego rogu zawartości.

Musisz to poprawić, tłumacząc zawartość o połowę mniejszą w lewo i górę.

tutaj jest świetny artykuł o tym, jak wyrównać wertykalnie .. Podoba mi się pływak.

http://www.vanseodesign.com/css/vertical-centering/

HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

I odpowiedni styl:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

Ustawiamy div rodzica, aby wyświetlał się jako tabela, a div potomny, aby wyświetlał się jako komórka tabeli. Następnie możemy użyć wyrównania w pionie na div div dziecka i ustawić jego wartość na środkową. Wszystko wewnątrz tego div dziecka będzie wyśrodkowane pionowo.

To proste. Po prostu dodaj display:table-cellw swojej głównej klasie.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

Sprawdź to jsfiddle !

Oto najnowsze najprostsze rozwiązanie - nie musisz niczego zmieniać, po prostu dodaj trzy linie reguł CSS do swojego kontenera div, na którym chcesz się skoncentrować. Uwielbiam Flex Box#LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Premia

justify-contentwartość można ustawić w kilku następujących opcji:

• flex-start, która wyrówna div div do miejsca, w którym rozpoczyna się przepływ flex w jego kontenerze nadrzędnym. W takim przypadku pozostanie na wierzchu.

• center, który wyrówna div dziecka do środka kontenera nadrzędnego. To jest naprawdę fajne, ponieważ nie trzeba dodawać dodatkowego div, aby owinąć wszystkie dzieci, aby umieścić opakowanie w pojemniku nadrzędnym, aby wyśrodkować dzieci. Z tego powodu jest to prawdą centrum pionowe (w column flex-direction. Podobnie, jeśli zmienisz flow-directionsię row, że staną się poziomo wycentrowany.

• flex-end, który wyrówna div div do miejsca, w którym Flex Flex kończy się w jego kontenerze nadrzędnym. W takim przypadku przesunie się na dół.

• space-between, który rozprzestrzeni wszystkie dzieci od początku przepływu do końca przepływu. Jeśli to demo, dodałem kolejny div div, aby pokazać, że są one rozłożone.

• space-around, podobnie jak space-between, ale z połową miejsca na początku i na końcu przepływu.

Ponieważ vertical-aligndziała zgodnie z oczekiwaniami na td, możesz umieścić jedną komórkę tablew, divaby wyrównać jego zawartość.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

Clunky, ale działa, o ile wiem. Może nie mieć wad innych obejść.

Wystarczy umieścić zawartość w tabeli o wysokości 100% i ustawić wysokość dla głównego div

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Aby pionowo wyśrodkować element przęsła lub elementu div w obrębie innego elementu div, dodaj pozycję względem elementu div elementu nadrzędnego i pozycję absolutną do elementu div elementu podrzędnego. Teraz element div elementu podrzędnego można ustawić w dowolnym miejscu wewnątrz elementu div. Przykład poniżej centruje element poziomo i pionowo.

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

css:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Jest to nowoczesne podejście i wykorzystuje funkcję CSS Flexbox. Możesz teraz wyrównać zawartość w pionie w kontenerze nadrzędnym, po prostu dodając te style do .mainkontenera

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

I jesteś gotowy, aby iść!