webForumDet fria alternativet

centrera text på bild

3 svar · 204 visningar · startad av benken

benkenMedlem sedan feb. 2003250 inlägg
#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...

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

jarvkloMedlem 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 ;)

benkenMedlem sedan feb. 2003250 inlägg
#4

Kolla, så där jag, tack jarvklo

256 ms totalt · 3 externa anrop · v20260731065814-full.2b84b982
130 ms — hämta forumlista (db)
124 ms — hämta statistik (db)
123 ms — hämta tråd, inlägg och bilagor (db)