centrera text på bild

HTML & CSS

3 svar · 209 visningar · startad av benken

Medlem sedan feb. 2003250 inlägg
Trådstart#1

Jag har en bild som jag vill ha en text centrerad mitt över bilden, jag har ett lager nu, men om texten är längre så blir den ju inte centrerad. Hur kan man göra...

Medlem sedan mars 2001895 inlägg
#2

Du kan ju alltid lösa det med att antingen ha två lager, eller att du lägger bilden som bakgrund och texten placeras över.

Medlem sedan juli 20013 378 inlägg
#3

Här är lite kod som demonstrerar hur du kan lösa det med CSS (dvs utan "lager") om du lägger bilden som centrerad bakgrundsbild i den tagg som du vill ha texten i.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
  Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
div.medsmiley {
  background-image: url([url]http://www.webforum.nu/images/wfstandard/smilies/wink.gif[/url]);
  background-repeat:no-repeat;
  background-position:50% 50%;
  text-align:center;
}
-->
</style>

</head>
<body>
<div class="medsmiley">hej hopp i lingonskogen</div>
</body>
</html>

Prova att lägga på width: och height: som motsvarar bildens storlek om du vet att texten är "mindre" än bilden ;)

Medlem sedan feb. 2003250 inlägg
#4

Kolla, så där jag, tack jarvklo

272 ms totalt · 4 externa anrop · v20260731065814-full.d34c6d5a
134 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)
132 ms — ändringar (db)