Jak wysrodowac element w divie wzgledem osi x i y?
Div ma 500x500 px a jpeg np 100x100, wiem jak wysrodkowac wzdluz osi x (text-algain) a wzdluz osi y?
Pełna wersja: [div] wysrodkowanie
text-valign: ?
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://www.hicksdesign.co.uk/journal/30/ve...tering-with-css
http://vmalek.murphy.cz/
trzy linki z google - "div + vertical center", wybrane na szybko
http://www.hicksdesign.co.uk/journal/30/ve...tering-with-css
http://vmalek.murphy.cz/
trzy linki z google - "div + vertical center", wybrane na szybko
zawsze mozesz ustwic padding:) padding-top (od gory) padding-bottom (od dolu)
Cytat(wisnia @ 2005-03-29 14:20:31)
zawsze mozesz ustwic padding:) padding-top (od gory) padding-bottom (od dolu)
Z tym w tym miejscu beda roznej wielkosci jpegi.
Zaczyna mi sie podobac to forum
OK, a kod:
wyświetla mi dwa prostokaty nałożone na siebie, dodaje centrowanie jednego z nich:
i się centruje natomiast drugi spada o jego grubość niżej. Pytanie: jak zrobić by jeden był wyśrodkowany, a drugi pozostał na swoim miejscu?
ps. stosowałem z-indexy, displaye, positiony i bez efektu
CODE
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="width: 100px; heigh: 100px; border: 2px solid green;">cc</div>
<div style="width: 50px; heigh: 50px; border: 1px solid black;">rr</div>
</body>
</html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="width: 100px; heigh: 100px; border: 2px solid green;">cc</div>
<div style="width: 50px; heigh: 50px; border: 1px solid black;">rr</div>
</body>
</html>
wyświetla mi dwa prostokaty nałożone na siebie, dodaje centrowanie jednego z nich:
CODE
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="width: 100px; heigh: 100px; border: 2px solid green; margin-left: auto;margin-right: auto;">cc</div>
<div style="width: 50px; heigh: 50px; border: 1px solid black;">rr</div>
</body>
</html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="width: 100px; heigh: 100px; border: 2px solid green; margin-left: auto;margin-right: auto;">cc</div>
<div style="width: 50px; heigh: 50px; border: 1px solid black;">rr</div>
</body>
</html>
i się centruje natomiast drugi spada o jego grubość niżej. Pytanie: jak zrobić by jeden był wyśrodkowany, a drugi pozostał na swoim miejscu?
ps. stosowałem z-indexy, displaye, positiony i bez efektu
Kod
#komunikat {
width:100%;
height:100%;
position:absolute;
display: table;
}
.komunikat_srodek {
display: table-cell;
vertical-align: middle;
}
.komunikat_tresc {
width:100px;
height:100px;
margin:0 auto;
}
width:100%;
height:100%;
position:absolute;
display: table;
}
.komunikat_srodek {
display: table-cell;
vertical-align: middle;
}
.komunikat_tresc {
width:100px;
height:100px;
margin:0 auto;
}
jak wrzuce zawartość to się rozjeżdża, mógłby ktoś poprawić mój przykład?
no dzięki sebekzosw. Dzięki Twojemu przykładowi na spokojnie przerobiłem swój i dział jak należy
no dzięki sebekzosw. Dzięki Twojemu przykładowi na spokojnie przerobiłem swój i dział jak należy
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.