Ik moet een responsieve pagina maken met bootstrap door een div in het midden van een pagina te plaatsen, zoals in de onderstaande lay-out.
Antwoord 1, autoriteit 100%
UPDATE voor Bootstrap 4
Eenvoudigere verticale rasteruitlijning met flex-box
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
height: 100%
}<div class="h-100 row align-items-center">
<div class="col" style="background:red">
TEXT
</div>
</div>Antwoord 2, autoriteit 28%
CSS:
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
HTML:
<div class="container">
<div>
example
</div>
</div>
Antwoord 3, autoriteit 16%
In bootstrap 4
om de kinderen horizontaal te centreren, gebruik bootstrap-4 class
justify-content-center
om de kinderen verticaal te centreren, gebruik bootstrap-4 class
align-items-center
maar vergeet niet om hier d-flex class mee te gebruiken
het is een bootstrap-4 utility class, zoals zo
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<div class="bg-primary">MIDDLE</div>
</div>
Opmerking:zorg ervoor dat u bootstrap-4-hulpprogramma’s toevoegt als deze code niet werkt
Antwoord 4, autoriteit 10%
Update voor Bootstrap 4
Nu Bootstrap 4 een flexbox is, is verticale uitlijning eenvoudiger. Gegeven een flexbox-div op volledige hoogte, gewoon ons my-autovoor gelijkmatige boven- en ondermarges…
<div class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<h1 class="display-3">Hello, world!</h1>
</div>
</div>
http://codeply.com/go/ayraB3tjSd/bootstrap-4- verticaal-midden
Verticaal midden in Bootstrap 4
Antwoord 5, autoriteit 4%
Je hoeft niets in CSS te veranderen, je kunt dit direct in de klas schrijven en je krijgt het resultaat.
<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
<div class="col" style="background:red">
TEXT
</div>
</div>
Antwoord 6, autoriteit 2%
zonder weergavetabel en zonder bootstrap, dat zou ik liever doen
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
</div>
</div>
html, body, .container-table {
height: 100%;
}
.container-table {
width:100vw;
height:150px;
border:1px solid black;
}
.vertical-center-row {
margin:auto;
width:30%;
padding:63px;
text-align:center;
}
http://codepen.io/matoeil/pen/PbbWgQ
Antwoord 7
Goed antwoord ppollono. Ik was gewoon aan het spelen en ik kreeg een iets betere oplossing.
De CSS zou hetzelfde blijven, d.w.z. :
html, body, .container {
height: 100%;
}
.container {
display: table;
vertical-align: middle;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
Maar voor HTML:
<div class="container">
<div class="vertical-center-row">
<div align="center">TEXT</div>
</div>
</div>
Dit zou genoeg zijn.
Antwoord 8
Niet de beste manier, maar zal nog steeds werken
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
<div class="col-lg-4"></div>
<div class="col-lg-4 border">
This div is in middle
</div>
<div class="col-lg-4"></div>
</div>
</div>
<div class="col-lg-12"></div>
</div>
</div>
Antwoord 9
body{
height: 100vh;
}
.container{
height: 100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center d-flex align-items-center justify-content-center">
<div>
<div>
<h1>Counter</h1>
</div>
<div>
<span>0</span>
</div>
<div>
<button class="btn btn-outline-primary">Decrease</button>
<button class="btn btn-danger">Reset</button>
<button class="btn btn-outline-success">Increase</button>
</div>
</div>
</div>Antwoord 10
Ik denk dat de eenvoudigste manier om de lay-out met bootstrap te bereiken is als volgt:
<section>
<div class="container">
<div class="row">
<div align="center">
<div style="max-width: 200px; background-color: blueviolet;">
<div>
<h1 style="color: white;">Content goes here</h1>
</div>
</div>
</div>
</div>
</div>
het enige wat ik deed was lagen div’s toevoegen waarmee ik de div kon centreren, maar aangezien ik geen percentages gebruik, moet je de maximale breedte van de div opgeven om te centreren.
U kunt dezelfde methode gebruiken om meer dan één kolom te centreren, u hoeft alleen maar meer div-lagen toe te voegen:
<div class="container">
<div class="row">
<div align="center">
<div style="max-width: 400px; background-color: blueviolet;">
<div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
<div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
<h1 style="color: white;">Some content</h1>
</div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
<p style="color: white;">More content</p>
</div>
</div>
</div>
</div>
</div>
</div>
Opmerking: dat ik een div heb toegevoegd met kolom 12 voor md, sm en xs, als je dit niet doet zal de eerste div met achtergrondkleur (in dit geval “blueviolet”) instorten, je zult in staat zijn om te zien de onderliggende divs, maar niet de achtergrondkleur.
Antwoord 11
Gebruik voor de actuele versie van Bootstrap 4.3.1
Stijl
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
height: 100%;
}
</style>
code
<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div
Antwoord 12
Probeer deze, voor het voorbeeld gebruikte ik een vaste hoogte. Ik denk dat het heeft geen invloed op de responsieve scenario.
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
<div class="bg-primary" style="width: 200px; height: 50px;"></div>
</div>
</body>
</html>Antwoord 13
In Bootstrap 4, gebruikt u:
<div class="d-flex justify-content-center">...</div>
U kunt ook de positie veranderen, afhankelijk van wat u wilt:
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
referentie hier
Antwoord 14
Voor het centreren van een div-toewijzing van drie klassennamen van bootstrap binnen in een div: ml-0 mr-0 mx-auto
Kijk gewoon naar het eenvoudige voorbeeld hieronder hoe het wordt gecentreerd
<div class="bg-primary w-50 ml-0 mr-0 mx-auto text-center">
Center
</div>
Antwoord 15
Hier is eenvoudige CSS-regels die een div in het midden zetten
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTTPS : //css-tricks.com/quick-css-trick-how-to-center-an-Object-exactly-in-the-center/
Antwoord 16
jsfiddle
HTML :
<div class="container" id="parent">
<div class="row">
<div class="col-lg-12">text
<div class="row ">
<div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
</div>
</div>
</div>
</div>
CSS :
#parent {
text-align: center;
}
#child {
margin: 0 auto;
display: inline-block;
background: red;
color: white;
}
Antwoord 17
De eenvoudigste oplossing is om aan beide zijden een lege kolom toe te voegen, zoals hieronder:
<div class="row form-group">
<div class="col-3"></div>
<ul class="list-group col-6">
<li class="list-group-item active">Yuvraj Patil</li>
</ul>
<div class="col-3"></div>
</div>