webForumDet fria alternativet

centrera text på bild

3 svar · 204 visningar · startad av benken

benkenMedlem sedan feb. 2003225 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 20011 175 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 295 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. 2003225 inlägg
#4

Kolla, så där jag, tack jarvklo

Genererad på 379 ms · cache AV · v20260730165559-full.f96bc7eb