Ik probeer een klein invoervak voor gebruikersnaam en wachtwoord te maken.
Ik zou willen vragen, hoe lijn je een div verticaal uit?
Wat ik heb is:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
Hoe kan ik de div met id Username en Form zo verticaal uitlijnen met het midden? Ik heb geprobeerd om:
vertical-align: middle;
in CSS voor de div met id Login, maar het lijkt niet te werken. Alle hulp wordt op prijs gesteld.
Antwoord 1, autoriteit 100%
De beste aanpak in moderne browsers is om flexbox te gebruiken:
#Login {
display: flex;
align-items: center;
}
Sommige browsers hebben leveranciersvoorvoegsels nodig. Voor oudere browsers zonder flexbox-ondersteuning (bijv. IE 9 en lager), moet u een fallback-oplossing implementeren met behulp van een van de oudere methoden.
Aanbevolen lectuur
Antwoord 2, autoriteit 40%
Dit kan worden gedaan met 3 regels CSS en is compatibel met (en inclusief) IE9:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Voorbeeld: http://jsfiddle.net/cas07zq8/
Antwoord 3, autoriteit 32%
Je kunt een div verticaal uitlijnen in een andere div. Bekijk dit voorbeeld op JSFiddleof bekijk het onderstaande voorbeeld.
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
De marge van .innerDivmoet de volgende indeling hebben: margin: auto *px;
[Waar, *is uw gewenste waarde.]
display: inline-flexwordt ondersteund in de nieuwste (bijgewerkte/huidige versie) browsers met HTML5-ondersteuning.
Het werkt mogelijk niet in Internet Explorer 😛 🙂
Probeer altijd een hoogte te definiëren voor een verticaal uitgelijnde div (d.w.z. innerDiv) om compatibiliteitsproblemen op te lossen.
Antwoord 4, autoriteit 5%
Ik ben vrij laat op het feest, maar ik heb dit zelf bedacht en het is een van mijn favoriete snelle hacks voor verticale uitlijning. Het is waanzinnig eenvoudig en gemakkelijk te begrijpen wat er aan de hand is.
U gebruikt het css-kenmerk :beforeom een div aan het begin van de bovenliggende div in te voegen, geef deze display:inline-blocken vertical-align:middleen geef dan dezelfde eigenschappen aan de onderliggende div. Aangezien vertical-alignbedoeld is voor uitlijning langs een lijn, worden die inline divs als een lijn beschouwd.
Maak de :beforediv height:100%, en de onderliggende div zal automatisch volgen en uitgelijnd worden in het midden van een zeer lange “lijn”.
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Hier is een vioolom te laten zien waar ik het over heb. De onderliggende div kan elke hoogte hebben en je hoeft nooit de marges/opvullingen aan te passen.
En hier is een meer verklarende viool.
Als je niet dol bent op :before, kun je altijd handmatig een div toevoegen.
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
En wijs dan gewoon .parent:beforeopnieuw toe aan .parent .before
Antwoord 5, autoriteit 4%
Als je de hoogte weet, kun je absolute positionering gebruiken met een negatieve margin-topzoals:
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
Anders is er geen echte manier om een div verticaal te centreren met alleen CSS
Antwoord 6, autoriteit 2%
In mijn Firefox en Chrome werk dit:
CSS:
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
Antwoord 7
Ik vond deze site nuttig: http://www.vanseodesign.com/css/vertical -centrering/
Dit werkte voor mij:
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
Antwoord 8
@GáborNagy’s reactie op een ander berichtwas de eenvoudigste oplossing die ik kon vinden en werkte als een tierelier voor mij, aangezien hij een jsfiddle meebracht, kopieer ik het hier met een kleine toevoeging:
CSS:
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
Als je het ook horizontaal wilt uitlijnen, moet je een andere div “inner-cell” binnen de “cell” div toevoegen en deze stijl geven:
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
Antwoord 9
Verticaal uitlijnen is altijd lastig geweest.
Hier heb ik een methode voor het verticaal uitlijnen van een div verdoezeld.
HTML:
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
CSS:
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
Antwoord 10
Tenzij de uitgelijnde div een vaste hoogte heeft, probeer dan de volgende CSS voor de uitgelijnde div:
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
Antwoord 11
Ik moest een minimale hoogte opgeven
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
Antwoord 12
als u fix height div gebruikt, kunt u padding-top gebruiken volgens uw ontwerpbehoefte.
of je kunt top:50% gebruiken. als we div gebruiken, dan werkt verticaal uitlijnen niet, dus gebruiken we opvulling boven of positie afhankelijk van de behoefte.
Antwoord 13
Het centreren van de onderliggende elementen in een div. Het werkt voor alle schermformaten
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
<div id="parent">
<div id="child">Content here</div>
</div>
voor meer details kun je deze link
bezoeken
Antwoord 14
De eenvoudigste manier om je div-element te centreren is door deze klasse te gebruiken met de volgende eigenschappen.
.light {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Antwoord 15
Ik heb een manier gevonden die goed werkt voor mij. Het volgende script voegt een onzichtbare afbeelding in (hetzelfde als bgcolor of een transparante gif) met een hoogte gelijk aan de helft van de witruimte op het scherm. Het effect is een perfecte verticale uitlijning.
Stel dat je een header-div (height=100) en een footer-div (height=50) hebt en dat de inhoud in de hoofd-div die je wilt uitlijnen een hoogte van 300 heeft:
<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>");
</script>
Je plaatst het script net voor de inhoud die je wilt uitlijnen!
In mijn geval was de inhoud die ik graag uitlijnde een afbeelding (breedte=95%) met een beeldverhouding van 100:85 (breedte:hoogte). Dit betekent dat de hoogte van de afbeelding 85% van de breedte is. En de breedte is 95% van de schermbreedte.
Ik gebruikte daarom:
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
Combineer dit script met
<body onResize="window.location.href = window.location.href;">
en je hebt een vloeiende verticale uitlijning.
Hopelijk werkt dit ook voor jou!
Antwoord 16
heb je deze geprobeerd?
.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}
hoop dat dit helpt
Antwoord 17
divs kunnen op die manier niet verticaal worden uitgelijnd, maar u kunt marges of position:relative gebruiken om de locatie te wijzigen.