Placera objekt vertikalt i block-element
Så här kan man göra för att ange vertikal position på text och bild inuti ett block-element. Man lägger två div runt om varandra och får dem att uppföra sig som tabell respektive tabell-cell.
HTML och CSS
<style type="text/css">
#outer{
width:300px;
height:300px;
border:1px solid #ccc;
padding:5px;
display: table;
position: static;
}
#inner{
display: table-cell;
vertical-align: middle;
position: static;
text-align:center;}
</style>
<div id="outer">
<div id="inner">
<img src="http://www.codeodyssey.se/upload/resource/blog/ufo_light.jpg" alt="ufo light">
</div>
</div>
#outer{
width:300px;
height:300px;
border:1px solid #ccc;
padding:5px;
display: table;
position: static;
}
#inner{
display: table-cell;
vertical-align: middle;
position: static;
text-align:center;}
</style>
<div id="outer">
<div id="inner">
<img src="http://www.codeodyssey.se/upload/resource/blog/ufo_light.jpg" alt="ufo light">
</div>
</div>
Att få innehåll att placera sig vertikalt enligt box-modellen har alltid varit lite krångligt. Läs mer på Jakpsatweb.cz där jag hittade lösningen. Finns även länkar till fler som försökt.
Tags