Ik probeer de inhoud van mijn tabbladen verticaal te centreren, maar wanneer ik de CSS-stijl display:inline-flex
toevoeg, verdwijnt de horizontale tekstuitlijning.
Hoe kan ik beide tekstuitlijningen x en y maken voor elk van mijn tabbladen?
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
Antwoord 1, autoriteit 100%
-
Benadering 1 –
transform
translateX
/translateY
:Voorbeeld hier / Voorbeeld op volledig scherm
In ondersteunde browsers (de meeste), kunt u
top: 50%
/left: 50%
in combinatie mettranslateX(-50%) translateY(-50%)
om het element dynamisch verticaal/horizontaal te centreren.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
Antwoord 2, autoriteit 5%
Als CSS3 een optie is (of als je een fallback hebt), kun je transform gebruiken:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
In tegenstelling tot de eerste benadering hierboven, wil je left:50% niet gebruiken met de negatieve vertaling omdat er een overloopfout zit in IE9+. Gebruik een positieve rechterwaarde en u ziet geen horizontale schuifbalken.
Antwoord 3, autoriteit 2%
De beste manier om een doos zowel verticaal als horizontaal te centreren, is door twee containers te gebruiken:
##De buitenste container :
- moet
display: table;
##De binnencontainer :
- moet
display: table-cell;
- moet
vertical-align: middle;
- moet
text-align: center;
##Het inhoudsvak:
- moet
display: inline-block;
- moet de horizontale tekstuitlijning aanpassen, tenzij u wilt dat de tekst wordt gecentreerd
##Demo :
body {
margin : 0;
}
.outer-container {
display: table;
width: 80%;
height: 120px;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
Antwoord 4, autoriteit 2%
Hier leest u hoe u 2 eenvoudige flex-eigenschappen gebruikt om n divs op de 2-as te centreren:
- Stel de hoogte van uw container in: hier is de body ingesteld op minimaal 100vh.
align-items: center
centreert de blokken verticaaljustify-content: space-around
verdeelt de vrije horizontale ruimte rond de divs
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
<div>foo</div>
<div>bar</div>
Antwoord 5
Voer dit codefragment uit en bekijk een verticaal en horizontaal uitgelijnde div.
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
Antwoord 6
CSS Grid: place-items
Eindelijk hebben we place-items: center
voor CSS Grid om het gemakkelijker te maken.
HTML
<div class="parent">
<div class="to-center"></div>
</div>
CSS
.parent {
display: grid;
place-items: center;
}
Uitvoer:
Antwoord 7
De eenvoudigste en schoonste oplossing voor mij is het gebruik van de CSS3-eigenschap “transform”:
.container {
position: relative;
}
.container a {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
<div class="container">
<a href="#">Hello world!</a>
</div>
Antwoord 8
.align {
display: flex;
width: 400px;
height: 400px;
border: solid 1px black;
align-items: center;
justify-content: space-around;
}
.align div:first-child {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
.align div {
width: 20px;
height: 20px;
background-color: blue;
}
<div class='align'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Antwoord 9
om de Div op een pagina te centreren controleer de viool-link
#vh {
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 200px;
height: 200px;
background: white;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div id="vh">Div to be aligned vertically</div>
Antwoord 10
Hieronder staat de Flex-box-aanpak om het gewenste resultaat te krijgen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex-box approach</title>
<style>
.tabs{
display: -webkit-flex;
display: flex;
width: 500px;
height: 250px;
background-color: grey;
margin: 0 auto;
}
.f{
width: 200px;
height: 200px;
margin: 20px;
background-color: yellow;
margin: 0 auto;
display: inline; /*for vertically aligning */
top: 9%; /*for vertically aligning */
position: relative; /*for vertically aligning */
}
</style>
</head>
<body>
<div class="tabs">
<div class="f">first</div>
<div class="f">second</div>
</div>
</body>
</html>
Antwoord 11
Een andere benadering is om de tabel te gebruiken:
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>
Antwoord 12
Om een element verticaal en horizontaal te centreren kunnen we ook onderstaande eigenschappen gebruiken.
Deze CSS-eigenschap lijnt-items verticaal uit en accepteert de volgende waarden:
flex-start: items worden uitgelijnd met de bovenkant van de container.
flex-end: items worden uitgelijnd met de onderkant van de container.
midden: items worden uitgelijnd in het verticale midden van de container.
basislijn: items worden weergegeven op de basislijn van de container.
uitrekken: items worden uitgerekt om in de container te passen.
Deze CSS-eigenschap justify-content , die items horizontaal uitlijnt en de volgende waarden accepteert:
flex-start: items worden uitgelijnd met de linkerkant van de container.
flex-end: items worden uitgelijnd met de rechterkant van de container.
midden: items worden uitgelijnd in het midden van de container.
tussenruimte: items worden weergegeven met gelijke tussenruimte.
ruimte rondom: items worden weergegeven met gelijke tussenruimte eromheen.
Antwoord 13
Grid css-aanpak
#wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.main {
background-color: #444;
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box main"></div>
</div>
Antwoord 14
Je moet de volgende Nieuwe en eenvoudige oplossing volgen:
.centered-class {
align-items: center;
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
}
<div class="centered-class">
I'm in center vertically and horizontally.
</div>
Antwoord 15
Maak gewoon boven, onder, links en rechts op 0.
<html>
<head>
<style>
<div>
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div> I am in the middle</div>
</body>
</html>
Antwoord 16
U kunt dit bereiken met CSS (uw element display:inline-grid
+ grid-auto-flow: row;
) Grid en Flex Box ( bovenliggend element display:flex;
),
Zie onderstaand fragment
#leftFrame {
display: flex;
height: 100vh;
width: 100%;
}
#tabs {
display: inline-grid;
grid-auto-flow: row;
grid-gap: 24px;
justify-items: center;
margin: auto;
}
html,body {
margin:0;
padding:0;
}
<div>
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
</div>
Antwoord 17
Als u de voorkeur geeft aan zonder:
flexbox / grid / table
of zonder de:
vertical-align: middle
U kunt het volgende doen:
HTML
<div class="box">
<h2 class="box_label">square</h2>
</div>
CSS
.box {
box-sizing: border-box;
width: 100px;
height: 100px;
text-align: center;
border: 1px solid black;
}
.box_label {
box-sizing: border-box;
display: inline-block;
transform: translateY(50%);
text-align: center;
border: 1px solid black;
}
Antwoord 18
- Nadering 6
/*Change units to "%", "px" or whatever*/
#wrapper{
width: 50%;
height: 70vh;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#left{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
}
#right{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: green;
}
.txt{
text-align: center;
line-height: 50vh;
}
<div id="wrapper">
<div id="left" class="txt">Left</div>
<div id="right" class="txt">Right</div>
</div>
Antwoord 19
Bron Link
Methode 1) Weergavetype flex
.child-element{ display: flex; justify-content: center; align-items: center; }
Methode 2) 2D-transformatie
.child-element { top: 50%; left: 50%; transform: translate(-50% , -50%); position: absolute; }
Bekijk andere methoden hier
Antwoord 20
De eenvoudigste manier om een div zowel verticaal als horizontaal te centreren is als volgt:
<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
Text Here
</div>
</div>
Antwoord 21
Dit is een gerelateerd probleem waarbij mensen naar deze pagina kunnen komen tijdens het zoeken: wanneer ik een div wil centreren voor een (100px vierkant) “waiting..” geanimeerde gif die ik gebruik:
.centreDiv {
position: absolute;
top: calc(50vh - 50px);
top: -moz-calc(50vh - 50px);
top: -webkit-calc(50vh - 50px);
left: calc(50vw - 50px);
left: -moz-calc(50vw - 50px);
left: -webkit-calc(50vw - 50px);
z-index: 1000; /*whatever is required*/
}
Antwoord 22
Ik gebruik deze css-code:
display: grid;
justify-content: center;
align-items: center;
de bron is:voer hier de linkbeschrijving in
Antwoord 23
Dit zou moeten werken
.center-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<div class="center-div">Center Div</div>
Antwoord 24
De eenvoudigste flexbox
-aanpak:
De eenvoudigste manier om een enkel element verticaal en horizontaal te centreren, is door er een flexibel item van te maken en de marge in te stellen op auto
:
Als u automatische marges toepast op een flexartikel, wordt dat artikel automatisch
verleng de gespecificeerde marge om de extra ruimte in de flex in te nemen
container…
.flex-container {
height: 150px;
display: flex;
}
.flex-item {
margin: auto;
}
<div class="flex-container">
<div class="flex-item">
This should be centered!
</div>
</div>