Hoe kan ik elementen in een div verticaal uitlijnen?

/* First 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;
}
/* Second way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}
/* Third 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>

Antwoord 14

Als u CSS gebruikt om verticaal te centreren, kunt u de buitenste containers als een tabel laten werken en de inhoud als een tabelcel. In dit formaat blijven uw objecten gecentreerd. 🙂

Ik heb bijvoorbeeld meerdere objecten in JSFiddle genest, maar het kernidee is als volgt:

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

Het voorbeeld van meerdere objecten:

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

resultaat

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

Antwoord 15

Ik heb een nieuwe oplossing gevonden om meerdere tekstlijnen in een div te uitlijnen met behulp van CSS & NBSP; 3 (en ik gebruik ook Bootstrap V3-rastersysteem om de UI te verfraaien), die is zoals hieronder:

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

Volgens mijn begrip moet de onmiddellijke ouder van tekst met element een hoogte hebben.

Antwoord 16

Standaard is H1 een blokelement en zal na het eerste IMG op de lijn rennen en zal de tweede IMG verschijnen op de regel na het blok.

Om dit te stoppen, kunt u de H1 instellen om inline stromingsgedrag te hebben:

#header > h1 { display: inline; }

Wat betreft absoluut de IMG in de div , moet u de bevattende div instellen om een ​​”bekende grootte” te hebben voordat dit goed werkt. In mijn ervaring moet je ook het standpunt wijzigen weg van de standaardpositie: relatieve werkt voor mij:

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

Als u dat aan het werk kunt krijgen, wilt u misschien proberen de hoogte, breedte, positie-kenmerken van DIV.HOOPER te verwijderen om de minimale vereiste kenmerken te krijgen om het gewenste effect te krijgen.

update:

Hier is een compleet voorbeeld dat werkt op Firefox 3:

& LT;! DOCTYPE HTML PUBLIEK "- // W3C // DTD XHTML 1.0 Streng // NL"
     "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
& lt; html & gt;
  & LT; HOOFD & GT;
    & LT; TITLE & GT; Voorbeeld van verticale positionering in een div & lt; / titel & GT;
    & LT; Style Type = "Tekst / CSS" & GT;
      # Shader & GT; H1 {display: inline; }
      #Heater {Border: solide 1px rood;
           Positie: familielid; }
      # img-for-abs-positionering {positie: absoluut;
                    onderkant: -1em; Rechts: 2em; }
    & LT; / STYLE & GT;
  & LT; / HOOFD & GT;
  & LT; BODY & GT;
    & LT; DIV ID = "Header" & GT;