Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

centrera en bild vertikalt

happyfejs

Startad av happyfejs,
i Webbutveckling

Rekommendera Poster

happyfejs

happyfejs

Postad
Postad

Hur centrerar jag en bild inuti en div vertikalt utan att använda mig av javascript eller liknande? Bilden är olika hög hela tiden.

 

har kollat runt på google ett bra tag och försökt alla möjliga tips som ges men hittar inget som funkar :S

 

Tack på förhand

Länk till kommentar
Dela på andra webbplatser
Jonas__B

Jonas__B

Postad
Postad

något som fungerar rätt dåligt i IE är display:table annars är tabeller det enda lätta sätt.

 

annars kan man arbeta med backgrundsbilder

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title> new document </title>
 <meta name="generator" content="editplus" />
 <meta name="author" content="" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
<style type="text/css">
body * {border:1px solid #aaa;padding:1px}
.real-table {height:300px;width:300px;}
.real-table td{text-align:center;vertical-align:middle}

.fake-table {height:300px;width:300px;display:table; }
.fake-table .tr{display:table-row}
.fake-table .td{display:table-cell;text-align:center;vertical-align:middle}
</style>
</head>

<body>
 <table class="real-table">
<tr>
	<td>
		<img src="C:/Users/jonasbo/Desktop/logo_RGB.jpg" style="width:200px" />
	</td>
</tr>
 </table>

 <div class="fake-table">
<div class="tr">
	<div class="td">
		<img src="C:/Users/jonasbo/Desktop/logo_RGB.jpg" style="width:200px" />
	</div>
</div>
 </div>

</body>
</html>

Länk till kommentar
Dela på andra webbplatser
happyfejs

happyfejs

Postad
  • Trådskapare
Postad

att sätta margin-top: 50% esd så blir toppen av bilden på 50%, inte centrum av den tyvärr :S

 

Hmm, tror jag har testat den varianten också Jonas, men kanske gjorde nått fel, ska testa igen. Tack så mycket! :)

Länk till kommentar
Dela på andra webbplatser
happyfejs

happyfejs

Postad
  • Trådskapare
Postad

Det funka fint, hade inte gjort bildhållarn till en table, den var fortfarande en div, thanx mate :)

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...