Avatar billede 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>
Avatar billede korup Nybegynder
02. september 2009 - 13:02 #1
Kan du ikke bruge [text-align: center;]

/korup
Avatar billede krab Praktikant
02. september 2009 - 13:35 #2
Nej, den skal ikke centere højre venstre, men op og ned.. Hvis I forstår.?
Avatar billede nissen2630 Novice
02. september 2009 - 13:49 #3
vertical-align: middle;
Avatar billede krab Praktikant
02. september 2009 - 13:55 #4
Det har jeg jo allerede stående.
Avatar billede 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>
Avatar billede krab Praktikant
02. september 2009 - 14:55 #6
Vil det sige løsningen er at jeg skal bruge en tabel?
Avatar billede 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)
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>
Avatar billede 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  =)
Avatar billede krab Praktikant
02. september 2009 - 17:32 #10
Christian_Belgien ->  Det virker kun i IE ... ellers tak for hjælpe..
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>
Avatar billede 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.
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.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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