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

krab Praktikant

02. september 2009 - 11:09 Der er 12 kommentarer og
1 løsning

Div tekst i midten!

Hvordan får jeg teksten til at stå i midten af boksen med vertical-align???

<style>
.headline{

font-family: Arial, Verdana, Helvetica, sans-serif;
width: 200px;
font-weight: bold;
height: 32px;
font-weight: bold;
color: #000000;
font-size:12px;
padding-left: 15px;
border: 1px solid #000000;
vertical-align:middle;
}
</style>

<div class="headline">
fewfew fewfewafeaw fdew
</div>

Synes godt om

korup Nybegynder

02. september 2009 - 13:02 #1

Kan du ikke bruge [text-align: center;]

/korup

Synes godt om

krab Praktikant

02. september 2009 - 13:35 #2

Nej, den skal ikke centere højre venstre, men op og ned.. Hvis I forstår.?

Synes godt om

nissen2630 Novice

02. september 2009 - 13:49 #3

vertical-align: middle;

Synes godt om

krab Praktikant

02. september 2009 - 13:55 #4

Det har jeg jo allerede stående.

Synes godt om

olebole Juniormester

02. september 2009 - 13:58 #5

<ole>

Det kan du ikke med HTML/CSS. vertical-align:center virker på elementer - ikke på elementernes indhold. Dog findes én undtagelse for dette: Tabelceller.

/mvh
</bole>

Synes godt om

krab Praktikant

02. september 2009 - 14:55 #6

Vil det sige løsningen er at jeg skal bruge en tabel?

Synes godt om

olebole Juniormester

02. september 2009 - 16:02 #7

Næh, løsningen er vel at designe til det medie, du vil anvende =)

Lidt ligesom valget mellem på den ene side at insistere på ottekantede bildæk og derfor at skulle forhøje passagerkabinen med ekstra en meters penge - og bare bruge tingene, som de nui engang er beregnet til at blive brugt ;o)

Synes godt om

Christian_Belgien Novice

02. september 2009 - 16:09 #8

vertical-align virker ikke som man skulle forvente. Det foelgende, som jeg har faaet inspiration til fra http://www.jakpsatweb.cz/css/css-vertical-center-solution.html, placerer teksten foerst i en div der placerer den halvvejs nede i boksen og saa i endnu en div der rykker den op med halvdelen af sin egen hoejde. Jeg haaber at problemerne med vertical-align, hvad de saa maatte vaere, loeses en dag.

<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.headline
{
font-family: Arial, Verdana, Helvetica, sans-serif;
width: 200px;
font-weight: bold;
height: 32px;
color: #000000;
font-size:12px;
border: 1px solid #000000;
#position: relative
}
.valign1
{
#position: absolute;
#top: 50%;
vertical-align: middle
}
.valign2
{
#position: relative;
#top: -50%
}

</style>
</head>

<body>
<div class="headline">
<div class="valign1">
<div class="valign2">
fewfew fewfewafeaw fdew
</div>
</div>
</div>
</body>
</html>

Synes godt om

olebole Juniormester

02. september 2009 - 16:16 #9

vertical-align fungerer præcist, som det i standarden er beskrevet, den skal virke - så dens virkemåde burde nok ikke komme bag på nogen =)

Synes godt om

krab Praktikant

02. september 2009 - 17:32 #10

Christian_Belgien -> Det virker kun i IE ... ellers tak for hjælpe..

Synes godt om

Christian_Belgien Novice

02. september 2009 - 18:25 #11

Ifoelge min kilde skulle det hjaelpe at tilfoeje display:table og display:table-cell, saaledes:

<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.headline
{
font-family: Arial, Verdana, Helvetica, sans-serif;
width: 200px;
font-weight: bold;
height: 64px;
color: #000000;
font-size:12px;
border: 1px solid #000000;
display: table;
#position: relative
}
.valign1
{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle
}
.valign2
{
#position: relative;
#top: -50%
}

</style>
</head>

<body>
<div class="headline">
<div class="valign1">
<div class="valign2">
fewfew fewfewafeaw <br/> fdew
</div>
</div>
</div>
</body>
</html>

Synes godt om

saudoo Nybegynder

03. september 2009 - 14:16 #12

Men table og table-cells er bare ikke understøttet af IE... Og så er man desværre ligevidt. Der går nok 10 år før vi kan begynde at lege med det, reelt set. Indtil da er jeg bange for at man er tvungen til at bruge en table til at wrappe ens indhold, som Ole også var inde på tidligere.

Synes godt om

Christian_Belgien Novice

03. september 2009 - 15:13 #13

Saudoo, koden virker stadig i min IE. IE ignorerer simpelthen de tilfoejede display table og display styles. Saa saavidt jeg kan se har du nu en loesning der virker i IE saavel som i andre browsere der hver for sig ignorerer hvad de ikke stoetter og bruger det de stoetter. Eller i hvilke browsere virker det ikke?

Men elegant er det ikke. Jeg haaber ikke der gaar 10 aar foer det forbedres.

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

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

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