Prawdziwe centrum Pionowe i poziome arkusze CSS Div

Jak można utworzyć prawdziwą krzyżową przeglądarkę krzyżową CSS, na przykład do użycia na stronie przechowywania?Prawdziwe centrum Pionowe i poziome arkusze CSS Div

Próbowałem to 2007 css sztuczki - How To Center an Object Exactly In The Center ale jak widać z mojego JSFiddle kodu środku nie 100%.

HTML:

<div class="center"> 
    <p>Text</p> 
</div>

CSS:

.center{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
    border:5px solid black; 
}

Źródło

2013-01-07 Jess McKenzie

Dlaczego 'margin: 0 auto' nie jest wystarczająco dobry? – meagar

@meagar: To tylko centrowanie w poziomie, a nie w pionie. – icktoofay

Ah. Pytanie naprawdę powinno wskazywać, że intencją jest * pionowo * elementy centrum. – meagar

Ta technika wymaga elementu mieć stałą szerokość i wysokość. Nie ustawiasz szerokości i wysokości. W zależności od granicy i marginesów, aby ją wyśrodkować, szerokość musi wynosić 190 pikseli, a wysokość musi wynosić 90 pikseli. Użycie wartości line-height i w połączeniu ze stałą szerokością i wysokością powoduje wyśrodkowanie tekstu i obramowania. Try it.

CSS

.center{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 190px; 
    height: 90px; 
    line-height: 90px; 
    text-align: center; 
    margin-top: -50px; 
    margin-left: -100px; 
    border:5px solid black; 
}

Źródło

2013-01-07 03:53:19 icktoofay

<div style='position:absolute; left:50%; top:50%; margin-left:(-)width_of_your_element/2px; margin-top:(-)height_of_your_element/2px'>

<!DOCTYPE html> 
<html> 
<body> 
<div style='border:1px solid; width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px'>hallo</div> 
</body> 
</html>

Źródło

2013-01-07 03:54:35 derWilly

To co zrobiłem

<html> 
<head> 
    <title>Page Title</title> 

    <style> 
     .center { margin:auto; width:500px; background-color:green; } 
    </style> 
</head> 
<body> 
    <div class="center"> 
     <p>Help me please</p> 
    </div> 
</body> 
</html>

Mam nadzieję, że to pomoże.

Źródło

2013-01-07 03:57:51

Można to zrobić z czystym CSS:

html { 
    width: 100%; 
    height: 100%; 
} 
body { 
    min-width: 100%; 
    min-height: 100%; 
} 
div.centeredBlueBox { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    width: 300px; 
    height: 200px; 
    background-color: blue; 
}

Ważne jest, aby podać konkretne (np 300px) i nie pochodzi (jak: auto lub 30%) wartości width i height.

Źródło

2013-01-20 09:35:41

Myślę, że to działa najlepiej. Wciąż działa przy zmianie rozmiaru zawartości, bez konieczności rekalowania również innych rozmiarów – BananaAcid

To moje rozwiązanie:

<div style="position: absolute; left: 50%; height: 100%;"> 
    <div style="position: relative; left: -50%; display: table; height: 100%;"> 
     <div style="display: table-cell; vertical-align: middle;"> 
      //your content here 
     </div> 
    </div> 
</div>

To działa w wielu przeglądarkach. I nie ma problemu z treścią dodaną po ułożeniu.

Źródło

2013-07-24 08:15:13 AKonst

To jest dodatkowy przykład z ustawiaczem wysokości, który utworzyłem dla wyrównania w pionie IE. Dodatkowa rozpiętość ma pionowe wyrównanie: środek.

<style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     overflow:hidden; 
     text-align:center; 
    } 
    html, body{ 
     height: 100%; 
    } 
    #loginContainer { 
     margin: 0 auto; 
     display: table; 
     min-width:300px; 
     text-align:left; 
     height: 85%; /* vertical align not exact in the middle */ 
    } 
    #loginContainer .label{ 
     width: 25%; 
     float:left; 
     white-space:nowrap; 
     line-height:20px; 
    } 
    #loginContainer h2{ 
     border-bottom:2px solid #B4C3E1; 
     border-width:0 0 3px; 
     padding:2px 4px; 
    } 
    .mainHeader { 
     position:absolute; 
     top:0; 
     left:0; 
     text-align:center; 
     width:100%; 
     font-size:2em; 
     white-space:nowrap; 
    } 
    .detailsText { 
     border-top:1px solid #F60; 
     margin-top:5px; 
     clear:both; 
    } 
    /* layout horizontal and vertical */ 
    .horizontalBox { 
     display: table-cell; 
     vertical-align: middle; /* not seen by IE6-7 */ 
     height: 100%; 
     white-space: nowrap; 
    } 
    .verticalBox { 
     padding: 55px 0 0 0; /* 55px height of logo */ 
    } 
    .rightText { 
     text-align:right; 
    } 
</style> 
<!--[if lte IE 8]> 
<style type="text/css"> 
    #loginContainer { 
     width:300px; /* minimum width */ 
    } 
    .horizontalBox { 
     text-align: center; 
    } 
    .verticalBox, .heightSetter { 
     display: inline-block; 
     vertical-align: middle; 
     text-align: left; 
     zoom:1; 
    } 
    .heightSetter { 
     height: 100%; 
    } 
    .verticalBox { 
     display: inline; 
     height: 0; 
    } 
    .heightSetter { 
     width: 1px; 
    } 
</style>  
<![endif]--> 
<div class="mainHeader">This is the Header content</div> 
<div id="loginContainer"> 
    <div class="horizontalBox"> 
     <div class="verticalBox"> 
      <h2>My header of the vertical box</h2> 
      <p>My Content</p> 
     </div> 
     <span class="heightSetter"></span> 
    </div> 
</div>

Źródło

2013-08-14 20:38:29

Wystarczy popatrzeć na this; dość sprytny artykuł.

Źródło

2013-12-23 23:57:31

Ustaw typ display dla DIV na table-cell. Następnie możesz użyć normalnego vertical-align, podobnie jak element TD.

<div style="display: table-cell; vertical-align: middle; height: 200px;"> 
Centered Text 
</div>

Źródło

2014-03-20 00:59:43 kpruner

Prawdziwe centrum Pionowe i poziome arkusze CSS Div

Odpowiedz

Powiązane problemy