HTML & CSSur HTML, XHTML & CSS
3 svar · 204 visningar · startad av benken
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...
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.
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 ;)
Kolla, så där jag, tack jarvklo