Skeleton'da bir bölümün ortalanması

Question

Bir proje için, ilk kez Skeleton Boilerplate kullanıyorum. İskelet kurallarına dayandırmadan Skeleton'da bir div merkezlemenin en iyi uygulamasını arıyorum.

Şu anda bir giriş sayfası için aşağıdaki yapıyı yapıyorum.

HTML:

<div class="container"> 
<div class="sixteen columns vertical-offset-by-one"> 
<div id="loginBox"> 
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" /> 
<form action="" id="loginForm"> 
<input type="text" name="username" required placeholder="username" class="loginTextField"> 
<input type="password" name="password" required placeholder="password" class="loginTextField"> 
<input type="submit" value="Log In" class="loginButton" /> 
</form> 
</div><!-- loginBox --> 

</div><!-- sixteen columns --> 

<div class="sixteen columns"> 
<p align="center"><a href="registration.html" target="_blank">Click here to register</a></p> 
</div> 
</div><!-- container --> 

CSS: Gördüğünüz gibi

#loginBox, #registrationBox { 
    width: 470px; 
    height: 450px; 
    background-color: white; 
    left: 245px; */ 
    top: 20px; */ 
    position: relative; 
    margin: 0px auto; } 

#registrationBox { 
    height: 500px; } 

.yeditepeLogo { 
    position: relative; 
    left: 40px; 
    top: 33px; } 

#loginForm, #registrationForm { 
    position: relative; 
    top: 45px; } 

.loginTextField, .registrationTextField { 
    position: relative; 
    height: 40px; 
    width: 388px; 
    left: 40px; 
    border-color: #dedede; 
    border-style: solid; 
    border-width: 1px; 
    margin-bottom: 10px; 
    text-align: left; 
    font-size: 18px; 
    text-indent: 10px; 
    -webkit-appearance: none; } 

.loginTextField:focus, .registrationTextField:focus { 
    outline-color: #ff9800; 
    outline-style: solid; 
    outline-width: 1px; 
    border-color: white; } 

.loginTextField:nth-child(2), .registrationTextField:nth-child(3) { 
    margin-bottom: 40px; } 

.loginButton, .registrationButton { 
    background-color: #77a942; 
    position: relative; 
    border: none; 
    width: 390px; 
    height: 60px; 
    left: 40px; 
    color: white; 
    font-size: 24px; 
    text-align: center; 
    opacity: 0.8; } 
    .loginButton:hover, .registrationButton:hover { 
    opacity: 1; } 

, #loginBox sabit genişlik/yükseklik vardır ve bu her zaman ortasına olmalıdır sayfa. marj: 0px otomatik kod, yatay merkezleme sağlar. Ama bu Skeleton'daki en iyi uygulama mı? İskelet daha iyi bir yol sağlar mı?

Ayrıca dikey merkezlemeyi nasıl sağlayabilirim?

Answer 1

için üst kapsayıcı ya da elemanı konumuna ayarlandığında

.container { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin-left: -43 //replace with half of the width of the container 
      margin-top: -52 //replace with half of the height of the container 
} 

kabın ayarlayabilirsiniz: göreceli;

İşte bu soru sorulmuştur ama belki başkası cevap kullanabilirsiniz bir süre beri biliyorum How to Center Anything With CSS

Answer 2

hakkında iyi makale. Skeleton ile ortalamayı üçte bir sütun sınıfını bir boşlukla, ardından içeriğiyle bir sonraki üçte bir sütun sınıfını, ardından yine bir alana sahip bir üçüncü üç sütun sınıfını doldurarak başarabildim.

<div class="one-third column">&nbsp;</div> 
<div class="one-third column"><p>Center of the screen.</p></div> 
<div class="one-third column">&nbsp;</div> 

Answer 3

Aslında iskelet içinde merkezleme divlarının yerleşik bir yolu var.

<div class="sixteen columns"> 
    <div class="four columns offset-by-six"> 
     <p>Lorem ipsum dolor sit amet.</p> 
    </div> 
</div> 

onbeş birinden diğerine değiştirilebilir bu durumda by-altı-ofset ve girilen olduğunca çok sütunlarla el altında sütun kaydırır. Temiz bir özellik olarak, daha küçük ekranlar kullanıldığında dengeleme, hizalamayı etkilemez.

Netleştirmek için: Bu, gerçek içeriği div içinde ortalamaz, ancak div'in kendisini ortalar.

Answer 4

Asus3000'in cevabı iyidir, çünkü yaptığım şey iyi ve iyi çalışıyor. Sadece bunu mobil cihazda eklerim, biraz da istenmeyen dikey alan ekler. Mobil dikey alandan kaçınmak için bir sınıf .filler kullanıyorum ve onu mobilde saklıyorum.

HTML

<div class="one-third column filler">&nbsp;</div> 
<div class="one-third column"><p>Center of the screen.</p></div> 
<div class="one-third column filler">&nbsp;</div> 

CSS

/* or whatever mobile viewport */ 
@media only screen and (max-width: 960px) { 
    .filler { display: none} 
} 

Answer 5

Ben eserler oldukça iyi inanıyoruz A yoludur:

<div class="container"> 
    <div class="row"> 
    <div class="two-half column"> 
    centered div content 
    </div> 
    </div> 
    </div> 

Bu merkezli ve duyarlı div yapar. Kenar boşluğunu üst üste tamamen çevirmek için değiştirebilirsiniz, ancak değişen genişlik (elbette) artık ortalanmayacaktır.

Eğer yanılıyorsam düzeltin ama bu benim için çalışıyor! :)