CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

hinkesten Praktikant

27. februar 2012 - 21:34 Der er 10 kommentarer og
1 løsning

CSS spørgsmål

Hej

Jeg er i tvivl om hvordan jeg centrerer en tekst i et givent CSS "tag"

Jeg har flg. kode:

.cssnav
{
position: relative;
font-family: Verdana;
background: url(../images/buttons/button1.png) no-repeat;
white-space: nowrap;
display: block;
width: 179px;
height: 48px;
margin: 0;
padding: 0;
}

.cssnav a
{
display: block;
font-size: 18px;
font-weight: bold;
width: 179px;
height: 48px;
display: block;
color: #000000;
text-decoration: none;
}

.cssnav img
{
width: 179px;
height: 48px;
border: 0;
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 0px;
top: 0px;
margin: 0px;
padding: 11px;
cursor: pointer;
}

Hvilket bruges på flg. måde:
<div class="cssnav"><img src="images/buttons/button2.png"><span>Tekst</span></div>

Pt. har jeg forsøgt at placere teksten nogenlunde centreret vertikalt og horisontalt i forhold til elementet, men uden held. Jeg ønsker altså at centrere teksten lige præcis i midten af mit CSS element både horisontalt og vertikalt.

Det er sikkert en lille ting, men jeg ved ikke hvad jeg skal søge på og jeg har forsøgt mig med de gængse metoder jeg kender - uden held.

Any inputs? På forhånd tak!

Synes godt om

numseslikkerensmorlukket Nybegynder

27. februar 2012 - 21:48 #1

Bruger udelukket pga SPAM

Dette indlæg er blevet modereret af en CoAdmin

pstidsen Novice

27. februar 2012 - 22:04 #2

Er det ikke bare text-align:center ? Det ville være rart med et link til din side.

Synes godt om

DeeDawg Nybegynder

28. februar 2012 - 07:40 #3

Først og fremmest, er din opbygning ikke specielt god. En navigationsmenu, uanset hvilken form den har, bør altid laves med lister. Fx

<ul>
    <li><a href="#">Forside</a></li>
    <li><a href="#">Produkter</a></li>
    <li><a href="#">Om os</a></li>
    <li><a href="#">Kontakt os</a></li>
</ul>

Med din nuværende opbygning, vil jeg umiddelbart mene at text-align og line-height, er alt du behøver. Du er dog også nødt til at sikre dig, at dit <span> element fylder dens forælder elements længde, fuldt ud.

.cssnav span{
    margin: 0;
    position: absolute;
    top: 0;left: 0;
    cursor: pointer;
    line-height: 48px;
    text-align: center;
}

Så altså, text-align: center centrerer teksten horisontalt, og line-height: 48px får den linje, teksten står på, til at være 48px høj, som også er højden på dens forælder element. Derfor vil teksten nu være centreret vertikalt også. :)

Synes godt om

numseslikkerensmorlukket Nybegynder

28. februar 2012 - 10:52 #4

Groft og barnligt sprog. Slettet.

Dette indlæg er blevet modereret af en CoAdmin

hinkesten Praktikant

29. februar 2012 - 18:55 #5

#3 Teksten centreres rigtig nok vertikalt, men ikke horisontalt nu. Jeg har rettet min css fil til 100% dit forslag.

Som det nok fremgår, så er jeg meget grøn hvad angår CSS og har altså ikke den fornødne indsigt i opbygningen af CSS. Jeg benytter pt. den gammeldags metode med tables og deraf den lidt visne tilgang til menuen.

Synes godt om

hinkesten Praktikant

29. februar 2012 - 18:55 #6

og desuden mange tak for jeres svar ;-)

Synes godt om

DeeDawg Nybegynder

29. februar 2012 - 21:35 #7

Ja, det er muligt at du har sat bredden, men har du sikret dig at din <span> element også er en blok? Ellers vil browseren ignorere den bredde du har angivet.

Kan gøres med enten display: block eller display: inline-block. :)

Synes godt om

hinkesten Praktikant

29. februar 2012 - 23:36 #8

Det har jeg formentligt ikke.

.cssnav span{
margin: 0;
position: absolute;
top: 0;left: 0;
cursor: pointer;
line-height: 48px;
text-align: center;
cursor: pointer;
display: block;
}

Sådan? Det giver ingen resultater, heller ikke med display: inline-block

Synes godt om

DeeDawg Nybegynder

01. marts 2012 - 09:43 #9

I ovenstående kode, kan jeg da heller ikke se, at du har defineret en bredde? :)

Følgende skulle meget gerne give det ønskede resultat

.cssnav span{
    margin: 0;
    width: 179px;
    display: block;
    position: absolute;
    top: 0;left: 0;
    cursor: pointer;
    line-height: 48px;
    text-align: center;
}

Synes godt om

hinkesten Praktikant

16. marts 2012 - 18:57 #10

Perfekt #9! Beklager den sene respons. Vil du lave et svar? :)

Synes godt om

DeeDawg Nybegynder

17. marts 2012 - 12:25 #11

Værsgod. :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
ASP Classic fil fra subfolder Af bsn i Andet programmering	3	07/05/202416:14	08/05/202401:00
Session Variable Af bsn i Andet programmering	3	01/05/202409:44	02/05/202409:29
Modifyed Field for all Records in Access Af ingeman i Andet programmering	2	29/04/202416:05	30/04/202407:19
Delphi - Parser JSON Fil Af juzas i Andet programmering	4	25/02/202407:13	28/02/202420:56
Bat fil Af sjass i Andet programmering	5	15/01/202417:45	15/01/202420:35

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS