Am'm, folosind Twitter Bootstrap 3, si eu am probleme cand vreau sa alinia vertical două div
, de exemplu — [JSFiddle link][1]:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Sistemul de rețea în Bootstrap foloseste float: left", nu " display:inline-block, deci proprietatea
vertical-alignnu't de lucru. Am încercat, folosind
margin-top` să-l repara, dar cred că acest lucru nu este o soluție bună pentru un design receptiv.
Acest răspuns prezintă un hack, dar mi-ar recomandăm să utilizați flexbox (după cum se menționează în @Haschem raspuns), deoarece's acum acceptate peste tot.
Demo-uri link-ul:
Mai poti folosi o clasă personalizat atunci când ai nevoie de ea:
<!-- language: lang-html -->
<div class="row">
<div class="col-xs-5 col-md-3 col-lg-1 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
<!-- language: lang-css -->
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
Folosind inline-block
adaugă un spațiu suplimentar între blocuri, dacă ai lăsat un spațiu real în cod (cum ar fi ...</div> </div>...
). Acest spațiu suplimentar pauze grila noastră dacă dimensiunile coloanelor adăuga până la 12:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Aici, ne-am'avem spații suplimentare între <div class="[...] col-lg-2"> " și " <div class="[...] col-lg-10">
(retur de car și 2 file/8 spații). Și așa...
Las's kick acest spațiu suplimentar!!
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Observa seemingly comentarii inutile <!-- ... -->
? Acestea sunt important -- fără ele, spații albe între <div>
elemente va dura până spațiu în layout-ul, de rupere de sistem grilă.
Notă: Bootply a fost actualizat
Odată cu apariția de CSS Flexibil Box, multe dintre designeri web' coșmaruri1 au fost rezolvate. Una dintre cele mai hacky altele, alinierea verticală. Acum este posibil chiar și în necunoscut înălțimi.
"de Două decenii de layout hacks se apropie de final. Poate nu mâine, dar în curând, și pentru tot restul vieții noastre."
— CSS Legendar Eric Meyer la W3Conf 2013 Flexibil Cutie (sau pe scurt, Flexbox), este un aspect nou sistem care este conceput special pentru layout scopuri. De caietul de sarcini: Flex layout este superficial similar cu aspect de bloc. Nu are multe de cel mai complex text sau document-centrice proprietăți care pot fi folosite în blocul layout, cum ar fi plutește și coloane. În schimb câștigă simplu și instrumente puternice pentru distribuirea de spațiu și alinierea conținutului în moduri care aplicații web și pagini web complexe nevoie de multe ori. Cum poate ajuta în acest caz? Ei bine, las's vezi.
Verticale aliniate în coloane
Folosind Twitter Bootstrap avem
.rând are ceva
.col-s. Tot ce trebuie să facem este pentru a afișa dorit
.rând<sup>2</sup> ca [flex container][5] cutie și apoi aliniați toate [flex articol][6]s (coloanele) vertical [
align-elemente`]7 de proprietate. EXEMPLU (vă Rugăm să citiți comentarii cu grijă)*
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Zona de culoare afișează padding-box de coloane.
8.3 Cross-axa de Aliniere: la `align-elemente de proprietate
Flex articole poate fi aliniat în cruce axa curent de linie de flex container, similar cu
justifica-content
, dar, în direcție perpendiculară.align-elemente
setează alinierea implicit pentru toate flex container de obiecte, inclusiv anonim flex articole.
align-elemente: center;
de Către centrul de valoare, flex articol ale modelului marja cutia este centrată în cruce axa în linie.
Alertă Mare
Notă importantă #1: Twitter Bootstrap nu't specifica "lățime" de coloane în plus dispozitive mici, dacă nu-ți dau una.col-xs-#
clase la coloane. Prin urmare, în special acest demo, eu am folosit
.col-xs-*clase, în scopul de coloane să fie afișate în mod corespunzător în modul mobil, pentru că specifică lățime de coloană în mod explicit. Dar, alternativ, ai putea **opriți** la Flexbox layout pur și simplu prin schimbarea
display: flex; " la "display: block; "" în anumite dimensiuni de ecran. De exemplu:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Sau ai putea [precizați .vertical-align
doar pe anumite dimensiuni de ecran][13] astfel:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
display: -webkit-box
și așa mai departe, în modul de producție.
Dacă faceți clic pe "Comutare Compilate de Vedere" în Demo, ai'll vedea prefixate versiune de CSS declarații (datorită Autoprefixer). După cum puteți vedea în anterior demo, coloane (flex elemente) nu mai sunt la fel de mare ca recipient (flex container box. respectiv .rând
element).
Acest lucru este din cauza folosirii de "centru", valoarea pentru align-elemente de proprietate. Valoarea implicită este "stretch", astfel încât obiectele pot umple toată înălțimea elementului părinte. În scopul de a stabili că, puteți adăuga
display: flex; la coloane precum:
EXEMPLU (din Nou, mintea comentarii)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Pentru lecturi suplimentare, inclusiv browser-ul de sprijin, aceste resurse ar putea fi utile:
1. https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474
2. L's mai bine să utilizați o clasă suplimentară pentru a nu modifica Twitter Bootstrap's, default .rând
.
Actualizare 2018
Știu că întrebarea era pentru Bootstrap 3, dar acum, că Bootstrap 4 a fost lansat, aici este un ghid actualizat pe verticală centru.
Important! Verticale centru este relativ la înălțime părinte
în Cazul în care părintele a elementului tău încearcă să center nu are definite înălțime, nici unul din centrarea verticala soluții va funcționa!
Acum, că Bootstrap 4 flexbox în mod implicit există multe abordări diferite pentru alinierea verticală folosind: auto-marjele, flexbox utils, sau afișare utils împreună cu align vertical utils. La prima "align vertical utils" pare evident, dar aceste doar de lucru cu inline și masă de elemente de afișare. Aici sunt unele Bootstrap 4 centrarea verticala opțiuni..
1 - Centru Vertical Folosind Auto Margini:
Un alt mod de a vertical centru este de a utiliza mi-auto. Acest lucru va center element în recipientul său. De exemplu,
h-100face pe rând înălțime completă, și mi-auto vor vertical center
col-sm-12` coloana.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Bootstrap 4 - centru Vertical folosind auto-marjele Demo
mi-auto` reprezintă marjele pe verticală a axei y și este echivalentă cu:
margin-top: auto;
margin-bottom: auto;
2 - Centru Vertical cu Flexbox:
De Bootstrap 4 .rand
este acum display:flex
puteți folosi pur și simplu align-auto-centru
pe orice coloană să vertical centru...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
sau, utilizați align-articole-centru
pe intreaga .rând să vertical centru alinia toate col-*
in randul...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Bootstrap 4 - Vertical centru de diferite înălțime coloane Demo
3 - Centru Vertical Cu Ajutorul Display-Utils:
Bootstrap 4 a afișare utils, care poate fi folosit pentru a afișa:masă,
display:table-cell,
display:inline`, etc.. Acestea pot fi utilizate cu alinierea verticală utils pentru a alinia inline, inline-block sau celulă de tabel elemente.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Bootstrap 4 - centru Vertical cu ajutorul display-utils Demo
Vezi, de asemenea: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4/42252877#42252877
Flexbox metoda pe recipient cu produs(e) la centru:
.display-flex-center {
display: flex;
align-items: center;
}
Transforma translateY metodă:
.transform-center-parent {
position: relative;
transform-style: preserve-3d;
}
.transform-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Display inline metodă:
.display-inline-block {
display: inline;
}
.display-inline-block > div {
display: inline-block;
float: none;
vertical-align: middle;
}
După răspunsul acceptat, dacă nu doriți să personalizați de marcare, pentru separarea preocupărilor sau pur și simplu pentru că te folosești un CMS, următoarea soluție funcționează bine:
.valign {
font-size: 0;
}
.valign > [class*="col"] {
display: inline-block;
float: none;
font-size: 14px;
font-size: 1rem;
vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Limitarea aici este că nu poți moșteni dimensiunea fontului de la elementul părinte, deoarece de rând stabilește dimensiunea fontului pentru a 0 în scopul de a elimina spațiu alb.
Am crezut că am'd împărtășească meu "soluție" în cazul în care ajută pe oricine altcineva care nu e't familiarizat cu @interogări mass-media ei înșiși.
Datorită @HashemQolami's a răspunde, am construit unele interogări mass-media, care ar lucra mobil și-col- clase, astfel încât am putut stiva col- pentru mobil, dar le afișa pe verticală aliniată în centrul pentru ecrane mai mari, de exemplu
<div class='row row-sm-flex-center'>
<div class='col-xs-12 col-sm-6'></div>
<div class='col-xs-12 col-sm-6'></div>
</div>
.
.row-xs-flex-center {
display:flex;
align-items:center;
}
@media ( min-width:768px ) {
.row-sm-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 992px ) {
.row-md-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 1200px ) {
.row-lg-flex-center {
display:flex;
align-items:center;
}
}
Mai multe machete complicate care necesită un număr diferit de coloane pe ecran de rezoluție (de exemplu, 2 rânduri de -xs, 3-sm, și 4 pentru -md, etc.) ar fi nevoie de ceva mai avansat învârteală, dar pentru o pagină simplă cu -xs stivuite și -sm și mai mare în rânduri, acest lucru funcționează bine.
Eu prefer aceasta metoda ca pe David Walsh centru Vertical CSS:
.children{
position: relative;
top: 50%;
transform: translateY(-50%);
}
"Transforma" e't esențial; se găsește doar la centru de un pic mai multă precizie. Internet Explorer 8 poate fi mai puțin centrat ca un rezultat, dar este încă nu-i rău - Pot folosi - Transformă 2d.
Aceasta este soluția mea. Trebuie doar să adăugați această clasă de la CSS conținut.
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}
Apoi, HTML-ul ar arata astfel:
<div class="col-xs-12 align-middle">
<div class="col-xs-6" style="background-color:blue;">
<h3>Item</h3>
<h3>Item</h3>
</div>
<div class="col-xs-6" style="background-color:red;">
<h3>Item</h3>
</div>
</div>
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 align-middle">
<div class="col-xs-6" style="background-color:blue;">
<h3>Item</h3>
<h3>Item</h3>
</div>
<div class="col-xs-6" style="background-color:red;">
<h3>Item</h3>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Am făcut acest lucru și a face ceea ce vreau să fac.
.align-middle {
margin-top: 25%;
margin-bottom: 25%;
}
Și acum pagina mea se pare ca
<div class='container-fluid align-middle'>
content
+--------------------------------+
| |
| +--------------------------+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| +--------------------------+ |
| |
+--------------------------------+
Chiar am găsit următorul cod funcționează folosind Chrome și nu alte browsere decât în prezent răspunsul selectat:
.v-center {
display:table!important; height:125px;
}
.v-center div[class*='col-'] {
display: table-cell!important;
vertical-align:middle;
float:none;
}
.v-center img {
max-height:125px;
}
Poate fi necesar să se modifice înălțimi (în mod special pe .v-centru
) și elimina/modifica div pe div[clasa a*='col-']
pentru nevoile dumneavoastra.
M-am întâlnit aceeași problemă. În cazul meu, nu am știut înălțimea recipientului exterior, dar acest lucru este cum am rezolvat:
Primul set de înălțime pentru html
și "corpul" elemente, astfel încât acestea sunt de 100%. Acest lucru este important! Fără acest lucru, html
și "corpul" elemente pur și simplu va moșteni o înălțime de copiii lor.
html, body {
height: 100%;
}
Apoi am avut un exterior clasă container cu:
.container {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
Și în cele din urmă recipient interior cu clasa:
.inner-container {
display: table-cell;
vertical-align: middle;
}
HTML este la fel de simplu ca:
<body>
<div class="container">
<div class="inner-container">
<p>Vertically Aligned</p>
</div>
</div>
</body>
Acest lucru este tot ce ai nevoie pentru a alinia vertical conținutul. Check it out în vioara:
Dacă utilizați Mai versiune de Bootstrap, și compilarea în CSS tine, puteți utiliza unele clase de utilitate pentru a utiliza cu Bootstrap clase.
Am'am găsit astea la lucru fantastic de bine în cazul în care nu doresc să păstreze capacitatea de reacție și configurabilitate de Bootstrap sistem grid (cum ar fi utilizarea -md " sau " - sm
), dar vreau toate coloanele dintr-un anumit rând să aibă toate aceeași înălțime verticală (ca să pot apoi a alinia vertical conținutul lor și au toate coloanele în rândul comun mijloc).
.display-table {
display: table;
width: 100%;
}
.col-md-table-cell {
@media (min-width: @screen-md-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.col-sm-table-cell {
@media (min-width: @screen-sm-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.vertical-align-middle {
vertical-align: middle;
}
<div class="row display-table">
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
</div>
Nu e't orice este nevoie pentru masă și masa de celule. Acesta poate fi realizat cu ușurință folosind transforma.
Exemplu: http://codepen.io/arvind/pen/QNbwyM
Cod:
.child {
height: 10em;
border: 1px solid green;
position: relative;
}
.child-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
<div class="col-xs-6 col-lg-6 child">
<div class="child-content">
<div style="height:4em;border:1px solid #000">Big</div>
</div>
</div>
<div class="col-xs-6 col-lg-6 child">
<div class="child-content">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
</div>
Am elaborat un pic pe zessx's a răspunde, în scopul de a face mai ușor de utilizat atunci când se amestecă diferite dimensiuni coloane pe diferite dimensiuni de ecran.
Dacă utilizați Sass, puteți adăuga acest la scss-fișier:
@mixin v-col($prefix, $min-width) {
@media (min-width: $min-width) {
.col-#{$prefix}-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
}
@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);
Care generează următoarele CSS (pe care le puteți utiliza direct în foi de stil, dacă nu utilizați Sass):
@media (min-width: 1200px) {
.col-lg-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 992px) {
.col-md-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 768px) {
.col-sm-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 480px) {
.col-xs-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
Acum îl puteți folosi pe site-receptiv coloane astfel:
<div class="container">
<div class="row">
<div class="col-sm-7 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div><div class="col-sm-5 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div><div class="col-md-5 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div>
</div>
</div>
OK, accidental am'am amestecat câteva soluții, și în cele din urmă lucrează acum pentru layout unde am încercat să fac un 3x3 masă cu Bootstrap coloane pe cea mai mică rezoluție.
/* Required styles */
#grid a {
display: table;
}
#grid a div {
display: table-cell;
vertical-align: middle;
float: none;
}
/* Additional styles for demo: */
body {
padding: 20px;
}
a {
height: 40px;
border: 1px solid #444;
}
a > div {
width: 100%;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="grid" class="clearfix row">
<a class="col-xs-4 align-center" href="#">
<div>1</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>2</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>3</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>4</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>5</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>6</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>7</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>8</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>9</div>
</a>
</div>
Flex comportamente sunt suportate nativ de Bootstrap 4. Adauga d-flex aliniați-articole-centru
în "rând" div. Nu mai este nevoie de a modifica CSS-ul de conținut.
Exemplu simplu:
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5 border border-dark" style="height:10em"> Big </div>
<div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>
Cu exemplul tau: http://jsfiddle.net/7zwtL702/
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5">
<div class="border border-dark" style="height:10em">Big</div>
</div>
<div class="col-2">
<div class="border border-danger" style="height:3em">Small</div>
</div>
</div>
Sursa: Flex · Bootstrap
div{
border: 1px solid;
}
span{
display: flex;
align-items: center;
}
.col-5{
width: 100px;
height: 50px;
float: left;
background: red;
}
.col-7{
width: 200px;
height: 24px;
float: left;
background: green;
}
<span>
<div class="col-5">
</div>
<div class="col-7"></div>
</span>
Există mai multe moduri în care puteți face:
display: table-cell; vertical-align: mijloc;
și CSS din recipient pentru
ecran: masa;
Utilizați umplutură, împreună cu mass-media-ecran pentru a schimba padding relativa la dimensiunea ecranului. Google @media screen pentru a ști mai multe.
Utilizarea relativă umplutură
I. e., specifica umplutură în termeni de %
Încercați acest lucru,
.exe {
font-size: 0;
}
.exe > [class*="col"] {
display: inline-block;
float: none;
font-size: 14px;
font-size: 1rem;
vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row exe">
<div class="col-xs-5">
<div style="height:5em;border:1px solid grey">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid red">Small</div>
</div>
</div>