Vraag Hoe een
horizontaal te centreren in een andere
?


Hoe kan ik horizontaal een centreren <div> binnen een andere <div> CSS gebruiken (als het zelfs mogelijk is)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>


3626
2018-06-09 08:34


oorsprong


antwoorden:


Je kunt deze CSS toepassen op de innerlijke <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Uiteraard hoeft u de. Niet in te stellen width naar 50%. Elke breedte minder dan de bevattende <div> zal werken. De margin: 0 auto is wat het feitelijke centreren doet.

Als u IE8 + target, is het misschien beter om dit in plaats daarvan te hebben:

#inner {
  display: table;
  margin: 0 auto;
}

Het maakt het binnenelement horizontaal in het midden en het werkt zonder een specifiek punt in te stellen width.

Werkvoorbeeld hier:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


4087



Als u geen vaste breedte wilt instellen op de binnenste div je zou zoiets als dit kunnen doen:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Dat maakt het innerlijke div in een inline-element dat kan worden gecentreerd text-align.


1109



De beste benaderingen zijn met CSS 3.

Doos model:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

Afhankelijk van uw bruikbaarheid kunt u ook de box-orient, box-flex, box-direction eigenschappen.

Buigen:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Lees meer over het centreren van de onderliggende elementen

En dit verklaart waarom het boxmodel de beste aanpak is:


297



Stel dat je div is 200px breed:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Zorg ervoor dat het bovenliggende element is gepositioneerd d.w.z. relatief, vast, absoluut of plakkerig.

Als u de breedte van uw div niet weet, kunt u gebruiken transform:translateX(-50%); in plaats van de negatieve marge.

https://jsfiddle.net/gjvfxxdj/


215



Ik heb dit gemaakt voorbeeld laten zien hoe verticaal en horizontaal  align.

Code is in feite dit:

#outer {
  position: relative;
}

en...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

en het blijft in de center zelfs als jij re-size jouw scherm.


200



Sommige posters hebben het CSS 3-weggebruik gecentreerd display:box.

Deze syntaxis is verouderd en mag niet meer worden gebruikt. [Zie ook deze post].

Dus alleen voor de volledigheid is hier de laatste manier om in CSS 3 te centreren met behulp van de Flexibele Box-lay-outmodule.

Dus als u eenvoudige opmaak hebt zoals:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... en u wilt uw items binnen het vak centreren, dit is wat u nodig heeft op het bovenliggende element (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Als u oudere browsers wilt ondersteunen die oudere syntaxis gebruiken voor flexbox hier is een goede plek om te kijken.


156



Als u geen vaste breedte wilt instellen en de extra marge niet wilt, voegt u toe display: inline-block tot uw element.

Je kunt gebruiken:

#element {
    display: table;
    margin: 0 auto;
}

119



CSS3's box-align eigenschap

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

74