Centrowanie elementu div w szkielecie

Question

Dla mojego projektu, używam szkieletu kotła po raz pierwszy. I szukam najlepszej praktyki centrowania div w szkielecie bez naruszania zasad Szkieletu.

W tej chwili mam następującą strukturę strony logowania.

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:

#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; } 

Jak widać, że #loginBox ma stałą szerokość/wysokość i powinien zawsze znajdować się na środku strona. margin: kod automatyczny 0px nadaje środkowi poziomą wartość. Ale czy to najlepsza praktyka w Skeleton? Czy Skeleton zapewnia lepszy sposób?

Również, w jaki sposób mogę zapewnić to pionowe centrowanie?

Answer 1

Można ustawić pojemnik do

.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 
} 

ustawiony pojemnik rodzic lub element position: relative;

Oto dobry artykuł o How to Center Anything With CSS

Answer 2

wiem, że to był a ponieważ to pytano, ale może ktoś inny może używać odpowiedź. Udało mi się osiągnąć centrowanie za pomocą szkieletu, wypełniając jedną trzecią kolumnę klasą spacji, następnie następną jedną trzecią kolumny z treścią, a następnie kolejną jedną trzecią kolumną z ponownie spacji.

<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

W rzeczywistości jest zbudowany w sposób centrujący divs w szkielecie.

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

Przesunięcie o szóstkę w tym przypadku można zmienić z jednej na piętnaście i przesunąć kolumnę pod ręką o tyle kolumn, ile wprowadzono. W przypadku funkcji schludnej przesunięcie nie wpływa na wyrównanie, gdy używane są mniejsze ekrany.

Aby wyjaśnić: To nie centrum rzeczywistej zawartości div, ale centruje sam div.

Answer 4

Odpowiedź Asus3000 jest dobra, ponieważ to jest to, co robię i działa dobrze. Dodam tylko, że na urządzenia mobilne, dodaje całkiem sporo niechcianej przestrzeni pionowej. Aby uniknąć mobilnej przestrzeni pionowej, używam klasy .filler i ukrywam ją na urządzeniach mobilnych.

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

Sposób wierzę, działa całkiem dobrze brzmi:

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

To sprawia, że ​​div wyśrodkowany i elastyczne. Możesz zmienić margines-górny, aby był na środku, jednak zmieniająca się szerokość (oczywiście) nie sprawi, że będzie on już wyśrodkowany.

Popraw mnie, jeśli się mylę, ale to działa dla mnie! :)