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 bild vertikalt eller horisontellt i div

magnus magnus

Startad av magnus magnus,
i Webbutveckling

Rekommendera Poster

magnus magnus

magnus magnus

Postad
Postad

Håller på med en bildvisningsfunktion där bilden skall centreras automatiskt, antingen vertikalt eller horisontellt beroende på bildens format.

 

Bilden skall centreras i en div på 500x500.

 

Hur lyckas man få en liggande bild att centreras vertikalt?

 

 

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad
Bilden skall centreras i en div på 500x500.
Du behöver även sätta line-height:500px; för din div.

 

Länk till kommentar
Dela på andra webbplatser
magnus magnus

magnus magnus

Postad
  • Trådskapare
Postad

Jag får inte det att fungera. Postar koden ifall jag kanske gjort något annat fel.

 

    <div align="center" id="pictureViewer" style="position:absolute; left: 0px; top: 135px; width: 500px; height: 500px; line-height: 500px; text-align:center; margin: 0; background-color: #FFFFFF; background:url(images/bg.jpg); border: thin solid black;">
       <img src="images/bild.jpg" style="vertical-align:middle;" />
    </div>

 

[inlägget ändrat 2010-01-24 12:53:45 av magnus magnus]

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad
Jag får inte det att fungera
Vad får du inte att fungera, jag får det rätt med din kod(som kan kortas in en del).

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad
Får inte bilden att centreras vertikalt,
Har du testat med enbart koden du visat i tråden? Resultatet kan ju påverkas ut av annan css-kod du använder...

 

Länk till kommentar
Dela på andra webbplatser
magnus magnus

magnus magnus

Postad
  • Trådskapare
Postad

Testade nu med enbart koden på en ny sida och resultatet blev det samma. En fyrkantig div med bilden längst upp i diven istället för centrerad vertikalt i diven.

 

Har kollat i både IE 8 och Opera 9.64

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

Ändrade om lite på placeringen ut av css-koden men detta fungerar i IE 8 och FF 9.3:

[log]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Language" content="sv" />
<title>Untitled</title>
<style type="text/css">
#pictureViewer {
position:absolute;
left:0px;
top:135px;
width:500px;
height:500px;
line-height:500px;
text-align:center;
background:#FFFFFF url(images/bg.jpg);
border:thin solid black;
} 
#GalleriImg {
vertical-align:middle;
}
</style>
</head>

<body>
<div id="pictureViewer">
<img src="bild1.gif" id="GalleriImg" />
</div>
</body>
</html>

[/log]

Bifogar bild!

 

[bild bifogad 2010-01-24 13:50:41 av Micke_skane]

1183807_thumb.jpg

Länk till kommentar
Dela på andra webbplatser
magnus magnus

magnus magnus

Postad
  • Trådskapare
Postad

Strålande!

Nu får jag det att fungera med enbart koden, men något verkar störa i resten av koden på sidan jag ska ha den på. Jag får köra iframes.

 

Man tackar och bockar för hjälpen. :thumbsup:

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad
Jag får köra iframes
Ok, men jag hade verkligen försökt skapa om det på nytt och fått det att fungera utan iframes, bara ett tips.

Ta en sak i taget bara...

 

Varsågod och tack själv för poängen :thumbsup:

 

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...