Funkar <div valign=middle> ?
Frågan#1
Hur gör man för att centrera innehållet i en div vertikalt. Jag hittar inget med CSS som fungerar.
En vertikalt centrerad bild i en div
10 svar · 1 109 visningar · startad av Tjock-Erik
nej
Ta och titta en bit ned på den här sidan, så har de lite exempel på olika vertikala placeringar:
http://www.devguru.com/Technologies/css/quickref/css_verticalalign.html
Hoppas det kan vara till hjälp.
MVH Patrik
Med css var det, här mitt förslag.
<html>
<head>
<title></title>
<style type="text/css">
<!--
div {widh:100%; height:100%; background-color:green; border:4px solid black;}
.bild { position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-120px;}
-->
</style>
</head>
<body>
<div>
<img src="bild1.jpg" width="300" height="240" class="bild">
</div>
</body>
</html>
Ändra width och height till bildens dimensioner. Du ändrar alltså värden för margin-left/margin-top enl. nedan.
<BR>
Om din bild är 300px bred och 200px hög så blir margin-värdena -150px respektive -100px.
<BR>
Dvs hälften av bildens mått. Bilden ligger då alltid i mitten oavsett upplösning.
<BR>
Om du bara vill centrering åt ett håll så tror jag du kan räkna ut detta själv!
<BR>
Du kan även ta bort div-deklarationen i css-delen.
Hej, ursäkta att jag återupplivar en gammal tråd.
Men jag tycker att bossses förslag är bra, men jag behöver ett som fungerar även om man inte alltid vet storleken på bilden i förväg. Har sökt, men bara hittat kodförslag där man redan vet storleken på bilden.
Sökte lite och fann: http://www.brunildo.org/test/img_center.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 500px;
border:1px solid #000;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if IE]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
</head>
<body>
<div class="wraptocenter"><span></span><img src="bild.gif" alt="..."></div>
</body>
</html>
Se där ja! Tack tack så mycket!
Stödet för inline-block är väl inte fullständigt va?
Nej, det stöds bara fullt ut i Opera 7 tror jag. Det finns ett partiellt stöd i MSIE och det stödet nyttjas i koden tillsammans med det tomma <span> elementet.