Jumbotronun içindeki
container` divini dikey olarak ortalamanın ve sayfanın ortasına yerleştirmenin bir yolunu arıyorum.
.jumbotronekranın tam yüksekliğine ve genişliğine uyarlanmalıdır. .container
divi
1025px` genişliğe sahiptir ve sayfanın ortasında (dikey olarak ortada) olmalıdır.
Bu sayfanın jumbotronun ekranın yüksekliğine ve genişliğine uyarlanmasını ve konteynerin dikey olarak jumbotrona ortalanmasını istiyorum. Bunu nasıl başarabilirim?
.jumbotron {
height:100%;
width:100%;
}
.container {
width:1025px;
}
.jumbotron .container {
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
Dikey hizalama Esnek kutu düzeni kullanılarak artık çok basit. Günümüzde, bu yöntem Internet Explorer 8 & 9 hariç web tarayıcılarının geniş bir yelpazesinde desteklenmektedir. Bu nedenle, IE8/9 için bazı hackler / polyfills veya farklı yaklaşımlar kullanmamız gerekir.
Aşağıda size bunu sadece 3 satırlık bir metinle (eski flexbox sözdiziminden bağımsız olarak) nasıl yapacağınızı göstereceğim.
Not: dikey hizalamayı elde etmek için .jumbotron
u değiştirmek yerine ek bir sınıf kullanmak daha iyidir. Örneğin ben vertical-center
sınıf adını kullanırdım.
[Örnek Burada][5] (jsbin üzerinde bir Ayna).
<div class="jumbotron vertical-center"> <!--
^--- Added class -->
<div class="container">
...
</div>
</div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Önemli notlar (Demoda dikkate alınmıştır):
heightveya
min-heightözelliklerinin *yüzde* değerleri üst öğenin
heightdeğerine göredir, bu nedenle üst öğenin
height` değerini açıkça belirtmeniz gerekir.
Satıcı ön ekli / eski flexbox sözdizimi, kısa olması nedeniyle yayınlanan parçacıkta atlanmıştır, ancak çevrimiçi örnekte mevcuttur.
Firefox 9 (test ettiğim) gibi bazı eski web tarayıcılarında, flex konteyner - bu durumda .vertical-center
- ebeveynin içindeki mevcut alanı almayacaktır, bu nedenle width
özelliğini aşağıdaki gibi belirtmemiz gerekir: genişlik: %100`.
Ayrıca yukarıda belirtildiği gibi bazı web tarayıcılarında flex öğesi - bu durumda .container
- yatay olarak ortada görünmeyebilir. Görünüşe göre auto
nun uygulanan sol/sağ margin
i flex öğesi üzerinde herhangi bir etkiye sahip değil.
Bu nedenle box-pack / justify-content
ile hizalamamız gerekir.
Daha fazla ayrıntı ve/veya sütunların dikey hizalanması için aşağıdaki konuya başvurabilirsiniz:
Bu, bu soruyu yanıtladığım sırada yazdığım eski yanıt. Bu yöntem burada tartışılmıştı ve Internet Explorer 8 ve 9'da da çalışması gerekiyordu. Kısaca açıklayacağım:
Satır içi akışta, bir satır içi seviye öğesi vertical-align: middle
bildirimi ile dikey olarak ortaya hizalanabilir. Spec W3C'dan alınmıştır:
orta Kutunun dikey orta noktasını üst kutunun taban çizgisi artı üst kutunun x yüksekliğinin yarısı ile hizalayın.
Üst öğenin - bu örnekte .vertical-center
öğesi - açık bir yüksekliğe
sahip olduğu durumlarda, bir ihtimal üst öğeyle tam olarak aynı yüksekliğe
sahip bir alt öğeye sahip olabilseydik, üst öğenin taban çizgisini tam yükseklikteki alt öğenin orta noktasına taşıyabilir ve şaşırtıcı bir şekilde istediğimiz akış içi alt öğeyi - .container
- dikey olarak merkeze hizalayabilirdik.
Bununla birlikte, .vertical-center
içinde ::before
veya ::after
sözde öğeleriyle tam yükseklikte bir öğe oluşturabilir ve ayrıca bunun ve diğer çocuk olan .container
ın varsayılan display
türünü inline-block
olarak değiştirebiliriz.
Ardından satır içi öğeleri dikey olarak hizalamak için vertical-align: middle;
kullanın.
Al bakalım:
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Ayrıca, ekstra küçük ekranlarda beklenmedik sorunları önlemek için, sözde öğenin yüksekliğini auto
veya 0
olarak sıfırlayabilir veya gerekirse display
türünü none
olarak değiştirebilirsiniz:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
Ve bir şey daha:
Konteynerin etrafında footer
/header
bölümleri varsa, bu öğeleri düzgün bir şekilde konumlandırmak (relative
, absolute
? size kalmış.) ve onları her zaman diğerlerinin üstünde tutmak için daha yüksek bir z-index
değeri (güvence için) eklemek daha iyidir.
Bootstrap.css'yi ekleyin, ardından bunu css'nize ekleyin
Bu Css
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
Şimdi sayfanızı çağırın
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
Benim tercih ettiğim teknik:
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-md-5 iPhone-features">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
Ayrıca bakınız [bu Keman][1]!