Kandu.dk - Lodret centrering af tekst på knap


/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg

Glemt dit kodeord?

Brugernavn*

Kodeord *

Husk mig

Brugerservice

Kom godt i gang

Bliv medlem

Seneste indlæg

Find en bruger

Stil et spørgsmål

Skriv et tip

Fortæl en ven

Pointsystemet

Kontakt Kandu.dk

Emnevisning

Kategorier

Alfabetisk

Karriere

Interesser

Teknologi

Reklame

Top 10 brugere

HTML

#	Navn	Point
1	molokyle	11184
2	Klaudi	5506
3	bentjuul	3377
4	severino	2040
5	smorch	1950
6	strarup	1525
7	natmaden	1396
8	scootergr..	1320
9	e.c	1150
10	miritdk	1110

Lodret centrering af tekst på knap
Fra : Preben Nielsen

Dato : 17-06-01 08:17

Jeg vil gerne have at teksten på en knap står centreret OGSÅ
lodret, og det skal styres fra stylesheet. Men jeg kan ikke finde
nogen kode der virker. Har prøvet med vertical-align: center,
vertical-align: middle. Findes der en kode der duer?
HTML/CSS-koderne uden vertical-align o.lign. ser sådan ud:

<div id="b1"><a href="dok.htm">tekst</a></div>

#b1
{
background: red;
font-family: arial;
text-align: center;
height: 40px;
width:300px;
}

--
Brug Validator service: http://www.html.dk/validator
- Tast din URL én gang, og validér dokumentet hos 12 validatorer
- Understøtter HTML, CSS og søgemaskineoptimering

Knud Gert Ellentoft (17-06-2001)

Kommentar
Fra : Knud Gert Ellentoft

Dato : 17-06-01 09:29

Sun, 17 Jun 2001 07:16:52 +0000 (UTC), skrev Preben Nielsen
<visto@get2net.dk>:

>Jeg vil gerne have at teksten på en knap står centreret OGSÅ
>lodret, og det skal styres fra stylesheet. Men jeg kan ikke finde
>nogen kode der virker.

Du kan indsætte
padding-top: 10px; (eller hvor mange px, det nu skal være),
så skubber du teksten ned, så den kommer til at stå i midten.

med venlig hilsen
Knud
--
http://home13.inet.tele.dk/smedpark
Bruger din udgave af Outlook Express Sv: i svar?
Så ser en stor del af gruppens brugere ikke dit svar.
Rettelse kan hentes på http://home.chello.no/bmork/oefix.exe

Preben Nielsen (17-06-2001)

Kommentar
Fra : Preben Nielsen

Dato : 17-06-01 10:29

> Du kan indsætte
> padding-top: 10px; (eller hvor mange px, det nu skal være),
> så skubber du teksten ned, så den kommer til at stå i midten.

Det virker - indtil man evt ændrer knappens højde, så skal man igen
til at lave en ca.-justering af padding. Jeg kan godt bruge din
løsning, hvis der ikke findes andre. Men den er ikke helt "stueren",
svarer lidt til at centrere i tekstbehandling v.hj.a.
mellemrumstasten. Findes der ikke en regulær mulighed for lodret
centrering?

--
Brug Validator service: http://www.html.dk/validator
- Tast din URL én gang, og validér dokumentet hos 12 validatorer
- Understøtter HTML, CSS og søgemaskineoptimering

Allan Vebel (21-06-2001)

Kommentar
Fra : Allan Vebel

Dato : 21-06-01 02:30

Preben Nielsen <visto@get2net.dk> skrev
> svarer lidt til at centrere i tekstbehandling v.hj.a.
> mellemrumstasten. Findes der ikke en regulær
> mulighed for lodret centrering?

Jo!

<html>
<head>
<style type="text/css">
..b1{
background:red;
font-family:arial;
text-align:center;
height:40px;
width:300px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="b1"><a href="dok.htm">tekst</a></td>
</tr>
</table>
</body>
</html>

Her vil teksten altid være vertikalt centreret indtil du fortæller den noget andet.

Jeg ville bruge vertical-align:middle;, men den fungerer tilsyneladende ikke på en <div>.

--
Allan

mola (17-06-2001)

Kommentar
Fra : mola

Dato : 17-06-01 15:15

En mulighed (omend heller ikke helt "stueren") er at tilføje:

line-height: 40px

Dvs. samme liniehøjde som dit elements højde. Virker i IE5.5, N6 og O5.

mvh
mola

"Preben Nielsen" <visto@get2net.dk> skrev i en meddelelse
news:9ghlh4$so$1@sunsite.dk...
> Jeg vil gerne have at teksten på en knap står centreret OGSÅ
> lodret, og det skal styres fra stylesheet. Men jeg kan ikke finde
> nogen kode der virker. Har prøvet med vertical-align: center,
> vertical-align: middle. Findes der en kode der duer?
> HTML/CSS-koderne uden vertical-align o.lign. ser sådan ud:
>
> <div id="b1"><a href="dok.htm">tekst</a></div>
>
> #b1
> {
> background: red;
> font-family: arial;
> text-align: center;
> height: 40px;
> width:300px;
> }
>
> --
> Brug Validator service: http://www.html.dk/validator
> - Tast din URL én gang, og validér dokumentet hos 12 validatorer
> - Understøtter HTML, CSS og søgemaskineoptimering

Søg

Reklame

Statistik

Spørgsmål :	177558
Tips :	31968
Nyheder :	719565
Indlæg :	6408893
Brugere :	218888

Månedens bedste

Årets bedste

Sidste års bedste