it-swarm-eu.dev

Jak vertikální zarovnání prvků v div?

Mám div se dvěma obrazy a h1. Všechny z nich musí být svisle zarovnány uvnitř div vedle sebe.

Jeden z obrazů musí být absolute umístěn uvnitř div.

Co je to CSS potřebné pro práci na všech běžných prohlížečích?

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

Wow, tento problém je populární. Je založen na nedorozumění ve vlastnosti vertical-align. Tento vynikající článek to vysvětluje:

Pochopení vertical-align, nebo "Jak (ne) vertikálně vycentrovat obsah" od Gavina Kistnera.

“Jak se centrovat v CSS”je skvělý webový nástroj, který pomáhá najít potřebné CSS centrovací atributy pro různé situace.


Ve zkratce (a aby se zabránilo hnilobě odkazů):

  • Vložené prvky (a ​​pouze inline prvky) mohou být svisle zarovnány v jejich kontextu pomocí vertical-align: middle. „Kontext“ však není celá výška nadřazeného kontejneru, je to výška textového řádku, ve kterém se nachází. Příklad jsfiddle
  • U blokových prvků je vertikální vyrovnání těžší a závisí na konkrétní situaci:
    • Pokud vnitřní prvek může mít pevnou výšku , můžete nastavit jeho pozici absolute a zadat jeho height, margin-top a top pozici. příklad jsfiddle
    • Pokud se středový prvek skládá z jednoho řádku a jeho rodičovská výška je pevná můžete jednoduše nastavit line-height kontejneru, aby vyplnil jeho výšku. Tato metoda je podle mých zkušeností velmi všestranná. příklad jsfiddle
    • … Existuje více takových zvláštních případů.
816
Konrad Rudolph

Když se podpora flexboxu zvyšuje, tento CSS aplikovaný na obsah obsahující prvek by vertikálně vycentroval obsaženou položku:

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

Použijte přednastavenou verzi, pokud potřebujete také cílit na prohlížeče Explorer 10 a staré (<4.4) prohlížeče Android:

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

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

    align-items: center;
}
109
E. Serrano

Použil jsem tento velmi jednoduchý kód:

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; }

Samozřejmě, zda používáte .class nebo #id, výsledek se nezmění.

104
user2346571

Fungovalo to pro mě:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
44
Romain
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Technika od mého přítele:

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 zde

21
abernier

Chcete-li umístit elementy bloku do středu (pracuje v IE9 a výše), je potřeba mít div wrapper:

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

Všechny z nich musí být vertikálně zarovnány uvnitř div

Zarovnáno jak ? Horní části obrázků jsou zarovnány s horní částí textu?

Jeden z obrazů musí být absolutně umístěn v div.

Absolutně umístěný vzhledem k DIV? Možná byste mohli načrtnout, co hledáte ...?

fd popsal kroky pro absolutní polohování, stejně jako úpravu zobrazení prvku H1 tak, aby se s ním obrazy zobrazovaly inline. K tomu přidám, že obrázky můžete zarovnat pomocí stylu vertical-align:

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

... to by dalo záhlaví a obrázky dohromady, s horními okraji zarovnány. Existují další možnosti zarovnání; viz dokumentace . Také by bylo vhodné, kdybyste zrušili DIV a přesunuli obrazy uvnitř elementu H1 - to poskytuje kontejneru sémantickou hodnotu a odstraní potřebu upravit zobrazení H1:

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

Použijte tento vzorec a bude fungovat vždy bez trhlin:

#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>
15
Anita Mandal

Můj trik spočívá v tom, že se do tabulky umístí tabulka s 1 řádkem a 1 sloupcem, nastaví se 100% šířky a výšky a vlastnost vertikální se zarovná: uprostřed.

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

11
joan16v

Téměř všechny metody musí určit výšku, ale často nemáme žádné výšky.
Tady je trik CSS3 3, který nevyžaduje znát výšku.

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

Je podporován i v IE9.

s předponami dodavatele:

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

Zdroj: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

10
Shadowbob

Můžeme použít výpočet funkce CSS pro výpočet velikosti elementu a pak odpovídajícím způsobem umístit podřízený prvek.

Příklad HTML:

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

A 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 zde vytvořeno: https://jsfiddle.net/xnjq1t22/

Toto řešení funguje také s citlivými divheight a width.

Poznámka: Funkce calc není testována na kompatibilitu se starými prohlížeči.

3
Dashrath

Standardně je h1 elementem bloku a vykreslí se na řádku za prvním img a způsobí, že se druhý řádek objeví na řádku za blokem.

Chcete-li to zastavit, můžete nastavit h1 tak, aby mělo chování inline flow:

#header > h1 { display: inline; }

Pokud jde o absolutní umístění img uvnitř div , musíte nastavit obsahující div, aby měl "známou velikost" předtím, než bude fungovat správně. Podle mých zkušeností také musíte změnit atribut pozice z výchozí pozice - pozice: relativní práce pro mě:

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

Pokud se vám to podaří, můžete zkusit postupně odstraňovat atributy výšky, šířky a polohy z div.header, abyste získali minimální požadované atributy, abyste dosáhli požadovaného efektu.

AKTUALIZACE:

Zde je kompletní příklad, který funguje ve Firefoxu 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>
3
Mike Tunnicliffe

Pomocí CSS do svislého středu můžete nechat vnější nádoby, aby fungovaly jako stůl, a obsah jako buňka tabulky. V tomto formátu zůstanou vaše objekty vycentrovány. :)

Pro příklad jsem vnořil více objektů do JSFiddle, ale hlavní myšlenka je takto:

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;
 }

Příklad více objektů:

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%;
}

Výsledek

 Result

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

3
Henk-Martijn

Podle dnešního dne jsem našel nové řešení pro vertikální vyrovnání více textových řádků v div pomocí CSS3 (a také používám zaváděcí systém bootstrap v3 pro zkrášlení uživatelského rozhraní), což je následující:

.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%;
}

Podle mého názoru musí mít bezprostřední rodič textu obsahujícího prvek určitou výšku. Doufám, že vám to také pomůže. Dík!

2
Shivam

Stačí použít jednu buňku tabulky uvnitř div! Stačí nastavit výšku buňky a stolu a na 100% a můžete použít vertikální zarovnání.

Jednobuněčný stůl uvnitř div zvládá vertikální zarovnání a je zpětně kompatibilní zpět do doby kamenné!

1
Joel Moses

Pro mě to fungovalo takto:

<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>

Prvek "a" převedený na tlačítko pomocí tříd Bootstrap a nyní je vertikálně vycentrován uvnitř vnějšího "div".

0
BernieSF

Toto je moje osobní řešení pro prvek i uvnitř div

Příklad 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
danigonlinea

Existují dva způsoby, jak zarovnat prvky vertikálně a horizontálně

1. Bootstrap 4.3.X

pro vertikální zarovnání: d-flex align-items-center

pro vodorovné zarovnání: 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;
    justify-content: 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>
0
WasiF

Používám následující řešení (bez polohování a žádné výšky řádku), protože pracuje více než rok a pracuje s IE 7 a 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
Arsh