Forum Mjukvara Programmering och digitalt skapande Tråd

Centrera bild med CSS

1
Skriv svar
Permalänk
Medlem
●

Centrera bild med CSS

Hur centrerar man en bild med CSS?
Jag har försökt med
image-align:center;
på diverse ställen, men det funkar inte. Hittar inget vettigt hos w3schools heller

Redigera
Citera flera Citera
Permalänk
Medlem
●

Typ...

<div style="text-align:center;">
<image ... style="margin:auto;"/>
</div>

Div-taggen för att internet explorer ska köra det och margin:auto i bilden för mozilla (och för att det borde vara så?)

Testa söka lite själv nästa gång

Detta verkar vettigt...

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av mirza
Typ...

<div style="text-align:center;">
<image ... style="margin:auto;"/>
</div>

Div-taggen för att internet explorer ska köra det och margin:auto i bilden för mozilla (och för att det borde vara så?)

Testa söka lite själv nästa gång

Detta verkar vettigt...

Tro mig, jag har googlat till ögonen blödde. Är du 100% säker på att det är "rätt" sätt att göra det på? Känns jävligt udda att text-align styr icke-text... eller har jag fattat fel? Jag vill bara påverka bilder, inte text. Ska jag använda den metodiken så måste jag särskilja texten och bilden med en extra tag vilket verkar onödigt omständigt.

Redigera
Citera flera Citera
Permalänk
Medlem
●

låt texten stå före <div...> eller efter </div> då påverkas den inte.

Visa signatur

fire walk with me.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Leloy
låt texten stå före <div...> eller efter </div> då påverkas den inte.

Eftersom jag inte vill ha CSS i html-filen (känns som att största poängen med CSS försvinner då), så måste jag ju i html-koden lägga till

<div class="center_img">
--bilden--
</div>

och i css-filen
div.center_img {text-align:center}

vilket känns väldigt omständigt. Jag hoppas fortfarande att jag missförstått något eller att det finns något snyggare sätt.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Nej, du ska använda margin-grejen för att bilden ska centreras.

Men internet explorer fattar inte detta och gör på sitt eget sätt och därför bör du använda text-align om du vill se resultat i ie.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av mirza
Nej, du ska använda margin-grejen för att bilden ska centreras.

Men internet explorer fattar inte detta och gör på sitt eget sätt och därför bör du använda text-align om du vill se resultat i ie.

<image ... style="margin:auto;"/>

Vart hittar du en tag som börjar på image? Förstår inte riktigt....
Har texten vänsterjusterad och margin-left och margin-right satta till auto redan...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jaja förlåt <img> =P
Orkade inte titta så noga...

Vilken webbläsare använder du?
Vilken webbläsare vill du att sidan ska funka för?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av mirza
Jaja förlåt <img> =P
Orkade inte titta så noga...

Vilken webbläsare använder du?
Vilken webbläsare vill du att sidan ska funka för?

Opera, IE och Mozilla, men den ska ju funka för alla webläsare (nyaste). Sidan ska gå igenom validatorn.

Margin-grejjen är ju bara en bugfix för IE 5, den centrerar ju inte. Text-align-delen centrerar bilden, vilket jag tycker är fel, eftersom en bild inte är text. Detta händer i både Opera 6 och IE 6. Det blir alltså så som jag vill ha det, men det känns som om det är fel sätt och att text-align inte borde påverka en bild, eftersom de är olika typer av objekt. Borde som sagt finnas något annat, mer korrekt sätt.

Lade till buggfixen:
div.center_img {margin:auto; text-align:center;}

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hmm... Jag provade det här:

CSS:
p.centered { text-align: center; }
HTML:
<p class="centered"><img src="filensnamn" height="100" width="100" alt="Alternativ text" /></p>

Det valideras som XHTML 1.0, så det borde väl vara okej. Jag har använt det och det fungerar ganska bra. Vad jag vet finns inte någon speciell inställning bara för bilder, du är nog tvungen att använda text-align.

Jag har varit inne och tittat på W3C (de som tar fram standarder för HTML, CSS etc http://www.w3.org) och loggan längst upp på sidan använder text-align, så det borde vara okej.

Redigera
Citera flera Citera
1
Skriv svar