Am un div cu două imagini și o "h1". Toate acestea trebuie să fie aliniate vertical în div, unul lângă altul.
Una dintre imaginile trebuie să fie "absolut" situat în div.
Ce este fișierul CSS necesar pentru ca aceasta să funcționeze pe toate browserele comune?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Wow, această problemă este popular. L's bazat pe o neînțelegere în `vertical-align proprietate. Acest excelent articol explică:
Înțelegere vertical-align
, sau "Cum (Nu) Pentru Vertical Centru de Conținut" de Gavin Kistner.
"Cum să center în CSS" este un mare instrument web care vă ajută să găsiți cele necesare CSS centrarea atribute pentru situații diferite.
Într-o coajă de nucă (și pentru a preveni link-ul de putregai):
vertical-align: middle
. Cu toate acestea, "context" nu e tot parinte container înălțime, înălțimea liniei de text sunt. [jsfiddle exemplu]()înălțime
, `margin-top " și " de sus poziție. [jsfiddle exemplu](http://jsfiddle.net/YFncP/2/)line-height
pentru a umple înălțimea sa. Această metodă este destul de versatil în experiența mea. [jsfiddle exemplu](http://jsfiddle.net/d4zGF/)Acum, că flexbox de sprijin este în creștere, această CSS aplicate la elementul ar vertical center cuprinse articol:
.container {
display: flex;
align-items: center;
}
Utilizați versiunea prestabilită de asemenea, dacă trebuie să vizeze Explorer 10, și vechi (< 4.4) browsere Android:
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
Am folosit acest cod foarte simplu:
HTML:
<div class="ext-box">
<div class="int-box">
<h2>Some txt</h2>
<p>bla bla bla</p>
</div>
</div>
CSS:
div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }
Evident, dacă utilizați un .clasa " sau " #id
, rezultatul a câștigat't se schimbe.
O tehnica de la un prieten de-al meu:
HTML:
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
CSS:
div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}
DEMO aici
Toate acestea trebuie să fie aliniate vertical în div
Aliniate cum****? Vârfurile de imagini aliniat cu partea de sus a textului?
Una dintre imaginile trebuie să fie absolută poziționat în div.
Absolut poziționat relativ la DIV? Poate ai putea schița ceea ce ai're în căutarea pentru...?
fd a descris pașii pentru poziționarea absolută, precum și ajustarea ecranului de H1
element, astfel încât imaginile vor apărea în linie cu ea. Pentru că, am'll adăuga că puteți alinia imaginile de utilizare a `vertical-align "stil":
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...acest lucru ar pune antetul si imaginile împreună, cu marginile de sus aliniate. Alte opțiuni de aliniere există; a se vedea documentația. S-ar putea găsi, de asemenea, benefic să renunțe la DIV și pentru a muta imagini în interiorul " H1 "element - acest lucru oferă o valoare semantică la container, și elimină necesitatea de a ajusta afișarea "H1":
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Utilizați această formulă, iar aceasta va va funcționează întotdeauna fără fisuri:
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
Aproape toate metodele trebuie să specificați înălțimea, dar de multe ori nu ne't au orice înălțimi. Deci, aici este o CSS3 3 linie truc pe care nu - 't nevoie să știți înălțimea.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
L's-a sprijinit chiar și în IE9.
cu prefixe furnizor de:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Sursa: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Trucul meu este de a pune în interiorul div-un tabel cu 1 rând și coloana 1, situat la 100% din lățimea și înălțimea, și proprietatea vertical-align:mijloc.
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
Vioara:
pentru alinierea verticală: d-flex aliniați-articole-centru
pentru alinierea orizontală: d-flex justifica-conținut-centru
.container {
height: 180px;
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="d-flex align-items-center justify-content-center bg-info container">
<div class="bg-light p-2">I am in Center</div>
</div>
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: #17a2b8;
height: 180px;
width:100%;
}
.child {
background-color: #f8f9fa;
padding: 0.5rem;
}
<div class="container">
<div class="child">I am in Center</div>
</div>
Folosind CSS vertical center, puteți lăsa exterior containere acționa ca o masă, și conținutul ca o celulă de tabel. În acest format obiectele vor rămâne centrat. :)
Am imbricate mai multe obiecte în JSFiddle pentru un exemplu, dar ideea de bază este ca aceasta:
HTML
<div class="circle">
<div class="content">
Some text
</div>
</div>
CSS
.circle {
/* act as a table so we can center vertically its child */
display: table;
/* set dimensions */
height: 200px;
width: 200px;
/* horizontal center text */
text-align: center;
/* create a red circle */
border-radius: 100%;
background: red;
}
.content {
/* act as a table cell */
display: table-cell;
/* and now we can vertically center! */
vertical-align: middle;
/* some basic markup */
font-size: 30px;
font-weight: bold;
color: white;
}
Cele mai multe obiecte exemplu:
HTML
<div class="container">
<div class="content">
<div class="centerhoriz">
<div class="circle">
<div class="content">
Some text
</div><!-- content -->
</div><!-- circle -->
<div class="square">
<div class="content">
<div id="smallcircle"></div>
</div><!-- content -->
</div><!-- square -->
</div><!-- center-horiz -->
</div><!-- content -->
</div><!-- container -->
CSS
.container {
display: table;
height: 500px;
width: 300px;
text-align: center;
background: lightblue;
}
.centerhoriz {
display: inline-block;
}
.circle {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: red;
border-radius: 100%;
margin: 10px;
}
.square {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: blue;
margin: 10px;
}
.content {
display: table-cell;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
color: white;
}
#smallcircle {
display: inline-block;
height: 50px;
width: 50px;
background: green;
border-radius: 100%;
}
Rezultat
Putem folosi un CSS funcția de calcul pentru a calcula dimensiunea de element și apoi poziționați elementul copil în mod corespunzător.
Exemplu HTML:
<div class="box">
<span><a href="#">Some Text</a></span>
</div>
Și CSS:
.box {
display: block;
background: #60D3E8;
position: relative;
width: 300px;
height: 200px;
text-align: center;
}
.box span {
font: bold 20px/20px 'source code pro', sans-serif;
position: absolute;
left: 0;
right: 0;
top: calc(50% - 10px);
}
a {
color: white;
text-decoration: none;
}
Demo-ul l-a creat aici: [
][1]Această soluție funcționează bine cu receptiv div
"înălțime" și "lățime", precum și.
Notă: funcția calc nu este testat pentru compatibilitate cu browserele vechi.
În mod implicit h1 este un element de bloc și se va face pe linie după prima img, și va provoca cel de-al doilea img să apară pe linia de la bloc.
Pentru a opri acest de la care apar puteți seta h1 de a avea inline fluxul de comportament:
#header > h1 { display: inline; }
Ca pentru absolut poziționarea img în interiorul div, aveți nevoie pentru a seta conțin div a fi un "dimensiuni cunoscute" înainte de aceasta va funcționa în mod corespunzător. În experiența mea, tu, de asemenea, nevoie pentru a schimba poziția de atribut departe de default - position: relative lucrează pentru mine:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Dacă puteți obține la locul de muncă, s-ar putea să doriți să încercați eliminarea progresiv înălțimea, lățimea, poziție atribute din div.antet pentru a obține minim de atribute necesare pentru a obține efectul dorit.
ACTUALIZARE:
Aici este un exemplu complet, care funcționează pe Firefox 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
Ca pe ziua de azi, am găsit o nouă soluție pentru a alinia vertical de text multiple-linii într-un div folosind CSS3 (și sunt, de asemenea, folosind bootstrap v3 sistemul de rețea pentru a înfrumuseța UI), care este la fel de mai jos:
.immediate-parent-of-text-containing-div{
height: 50px; /* or any fixed height that suits you.*/
}
.text-containing-div {
display: inline-grid;
align-items: center;
text-align: center;
height: 100%;
}
Ca pe înțelegerea mea, mamă imediată de text care conțin element trebuie să aibă o înălțime. Sper că va ajuta și pe tine. Multumesc!!!
Noul meu mod favorit de a face cu o grilă CSS:
/* technique */
.wrapper {
display: inline-grid;
grid-auto-flow: column;
align-items: center;
justify-content: center;
}
/* visual emphasis */
.wrapper {
border: 1px solid red;
height: 180px;
width: 400px;
}
img {
width: 100px;
height: 80px;
background: #fafafa;
}
img:nth-child(2) {
height: 120px;
}
<div class="wrapper">
<img src="https://source.unsplash.com/random/100x80/?bear">
<img src="https://source.unsplash.com/random/100x120/?lion">
<img src="https://source.unsplash.com/random/100x80/?tiger">
</div>
Doar folosi o singură celulă de tabel în interiorul div! Doar seta mobil și masa înălțime și cu până la 100% și puteți utiliza vertical-align.
O singură celulă de tabel în interiorul div-manere verticale-alinierea și este compatibil înapoi în Epoca de Piatră!
#3 moduri de a face centrul de copil div într-un părinte div
[Demo][2]
/* 1st way */
.parent1 {
background: darkcyan;
width: 200px;
height: 200px;
position: relative;
}
.child1 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -15px;
}
/* 2nd way */
.parent2 {
display: flex;
justify-content: center;
align-items: center;
background: darkcyan;
height: 200px;
width: 200px;
}
.child2 {
background: white;
height: 30px;
width: 30px;
}
/* 3rd way */
.parent3 {
position: relative;
height: 200px;
width: 200px;
background: darkcyan;
}
.child3 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent1">
<div class="child1"></div>
</div>
<hr />
<div class="parent2">
<div class="child2"></div>
</div>
<hr />
<div class="parent3">
<div class="child3"></div>
</div>
Am fost folosind următoarea soluție (cu nr. de poziționare și nici înălțimea liniei) de mai bine de un an, acesta funcționează cu IE 7 și 8, precum și.
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>