Es mēģinu centrēt savu cilnes saturu vertikāli, bet, kad pievienoju CSS stilu display:inline-flex
, horizontālais teksta izlīdzinājums pazūd.
Kā es varu izveidot abus teksta izlīdzinājumus x un y katrai cilnei?
* { 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>
transformēt
translateX
/translateY
:[Piemērs šeit][1] / [Pielikums visā ekrānā][2].
Atbalstītajās pārlūkprogrammās (lielākajā daļā pārlūkprogrammu) var izmantot top: 50%
/left: 50%
kombinācijā ar translateX(-50%) translateY(-50%)
, lai dinamiski vertikāli/horizontāli centrētu elementu.
.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>
[Piemērs šeit][4] / [Pielikums visā ekrānā][5].
Atbalstītās pārlūkprogrammās iestatiet mērķa elementa display
uz flex
un izmantojiet align-items: center
vertikālai centrēšanai un justify-content: center
horizontālai centrēšanai. Tikai neaizmirstiet pievienot ražotāja prefiksus papildu pārlūkprogrammas atbalstam ([skat. piemēru][7]).
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
table-cell
/vertical-align: middle
:[Piemērs šeit][8] / [Paša ekrāna piemērs][9]
Dažos gadījumos jums būs jānodrošina, ka elementa html
/body
augstums ir iestatīts uz 100%
.
Lai nodrošinātu vertikālu izlīdzināšanu, iestatiet vecākajam elementam platums
/augstums
uz 100%
un pievienojiet display: table
. Tad atvasinātajam elementam mainiet display
uz table-cell
un pievienojiet vertical-align: middle
.
Horizontālai centrēšanai varat pievienot text-align: center
, lai centrētu tekstu un citus inline
atvasinātos elementus. Kā alternatīvu var izmantot margin: 0 auto
, pieņemot, ka elements ir block
līmeņa.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
50%
no augšas ar nobīdi:[Piemērs šeit][10] / [Pilna ekrāna piemērs][11]
Šī pieeja pieņem, ka tekstam ir zināms augstums - šajā gadījumā 18px
. Vienkārši absolūti novietojiet elementu 50%
no augšas attiecībā pret vecāko elementu. Izmantojiet negatīvu margin-top
vērtību, kas ir puse no zināmā elementa augstuma, šajā gadījumā - -9px
.
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
līnijas augstuma
metode (vismazāk elastīga - nav ieteicama):[Piemērs šeit][12]
Dažos gadījumos vecākajam elementam būs fiksēts augstums. Lai veiktu vertikālo centrēšanu, viss, kas jums jādara, ir jānosaka atvasinātā elementa line-height
vērtība, kas ir vienāda ar vecākā elementa fiksēto augstumu.
Lai gan dažos gadījumos šis risinājums darbojas, ir vērts atzīmēt, ka tas nedarbosies, ja ir vairākas teksta rindas - [kā šeit][13].
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
Ja CSS3 ir iespējama (vai jums ir alternatīva), varat izmantot transformāciju:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
Atšķirībā no pirmās iepriekš minētās pieejas jūs nevēlaties izmantot left:50% ar negatīvu tulkojumu, jo IE9+ ir pārplūdes kļūda. Izmantojiet pozitīvu labo vērtību, un jūs neredzēsiet horizontālas ritināšanas joslas.
Cita pieeja ir izmantot tabulu:
<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>