Center a DIV poziomo i pionowo [duplikat]
To pytanie ma już odpowiedź tutaj:
- Jak wyśrodkować element w pionie i poziomie? 13 Odpowiedzi
Czy istnieje sposób, aby wyśrodkować DIV w pionie i poziomie ale, i to jest ważne, że zawartość nie zostanie wycięta, gdy okno jest mniejsze niż zawartość div musi mieć tło kolor i szerokość i wysokość.
Zawsze wyśrodkowywałem divy z absolutnym pozycjonowaniem i ujemnymi marginesami, jak w podanym przykładzie. Ale ma problem, że tnie zawartość na górze. Czy istnieje metoda na wyśrodkowanie div .treść bez tego problemu?
Mam tutaj przykład do odegrania: http://jsbin.com/iquviq/1/edit
CSS:
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}
HTML:
<div class="background">
<div class="content"> some text </div>
</div>
Moje pytanie nie jest duplikatem " jak wyśrodkować element poziomo i pionowo? "1 - moje pytanie zostało zadane wcześniej. (wystarczy sprawdzić daty). 2 - moje pytanie bardzo wyraźnie i w kolorze czarnym jako warunek: "zawartość nie zostanie wycięta, gdy okno będzie mniejsze od zawartości"
7 answers
Po wypróbowaniu wielu rzeczy znajduję sposób, który działa. Podzielę się nim tutaj, jeśli jest przydatny dla kogokolwiek. Możesz zobaczyć to tutaj działa: http://jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute; /*it can be fixed too*/
left:0; right:0;
top:0; bottom:0;
margin:auto;
/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width:100%;
max-height:100%;
overflow:auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-18 09:46:59
Dla nowoczesnych przeglądarek
Kiedy masz ten luksus. Jest też flexbox, ale nie jest to szeroko wspierane w momencie pisania tego tekstu.HTML:
<div class="content">This works with any content</div>
CSS:
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Tinker with it further on Codepen or on JSBin
Aby uzyskać wsparcie dla starszych przeglądarek, poszukaj w innym miejscu w tym wątku.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-18 22:24:03
Oto demo: http://www.w3.org/Style/Examples/007/center-example
Metoda (przykład JSFiddle )
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<div id="content">
Content goes here
</div>
Inna metoda ( jsfiddle przykład )
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-28 00:05:04
Uzasadnionym sposobem, aby to zrobić niezależnie od rozmiaru div dla dowolnej wielkości przeglądarki jest:
div{
margin:auto;
height: 200px;
width: 200px;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:red;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-12 06:00:19
Nie wierzę, że istnieje sposób, aby to zrobić ściśle z CSS. Powodem jest twój "ważny" kwalifikator do pytania: zmuszanie elementu nadrzędnego do rozszerzenia o zawartość jego dziecka.
Zgaduję, że będziesz musiał użyć kilku bitów JavaScript, aby znaleźć wzrost dziecka i dokonać korekt.
Tak więc, z tym HTML:
<div class="parentElement">
<div class="childElement">
...Some Contents...
</div>
</div>
Ten CSS:
.parentElement {
position:relative;
width:960px;
}
.childElement {
position:absolute;
top:50%;
left:50%;
}
Ten jQuery może się przydać:
$('.childElement').each(function(){
// determine the real dimensions of the element: http://api.jquery.com/outerWidth/
var x = $(this).outerWidth();
var y = $(this).outerHeight();
// adjust parent dimensions to fit child
if($(this).parent().height() < y) {
$(this).parent().css({height: y + 'px'});
}
// offset the child element using negative margins to "center" in both axes
$(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});
Pamiętaj o prawidłowym załadowaniu jQ, albo w ciele poniżej dotkniętych elementów lub w głowie wewnątrz $(document).ready(...).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-02 16:01:45
Chcesz ustawić styl
margin: auto;
I usuń style pozycjonowania (góra, lewo, pozycja)
Wiem, że to będzie centrum horrizontaly, ale nie jestem pewien co do pionu!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-02 14:46:50
Możesz porównać różne metody bardzo dobrze wyjaśnione na tej stronie: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Zalecaną metodą jest dodanie pustego elementu pływającego przed zawartością, której nie można wyśrodkować i wyczyszczenie jej. Nie ma minusów, o których wspomniałeś.
I forked your JSBin to apply it: http://jsbin.com/iquviq/7/edit
HTML
<div id="floater">
</div>
<div id="content">
Content here
</div>
CSS
#floater {
float: left;
height: 50%;
margin-bottom: -300px;
}
#content {
clear: both;
width: 200px;
height: 600px;
position: relative;
margin: auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-02 15:37:31