CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
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)
Avatar billede 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>
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..
Avatar billede 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>
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.
Avatar billede 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.
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

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
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
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 20:56 Cell 13 pro Af melli i Fri debat
I går 20:15 Gemme ark uden koden Af Marting i Excel
I går 15:40 Hvordan man laver et spil Af Nick1234 i Browsere
I går 13:03 ny fane skifter til yahoo Af Dittelit i Søgemaskiner
I går 12:09 VPN i forhold til facebook? Af Novice-1 i Andet sikkerhed
White papers
Flere white papers »


Premium
Teaser billede
Efter kåring som Danmarks bedste Microsoft-partner for andet år i træk: "Der kom sindssygt mange reaktioner"
Læs mere »
AWS' omdømme får tæsk i årets Image-undersøgelse - og selskabet nægter at kommentere på hvorfor
Nye detaljer om EU-Parlamentets datalæk: Straffeattester og pas var blandt lækkede data
Datatyveriet mod Netcompany rammer selskabets omdømme: "Det kan være enormt svært at betale af"
Se alle »
Computerworld
Teaser billede
Så nemt er det at knække et kodeord på otte tegn
Læs mere »
Første resultater: Så meget bedre er de særlige ’Copilot+’ pc’er
Microsofts udfordrer Apples Macbook med en helt ny generation af Surface-enheder: Bliver 90 procent hurtigere
Test af Apples magtdemonstration: Den nye iPad Pro er klodens bedste tablet – men måske det ikke er nok alligevel?
Se alle »
CIO
Teaser billede
De bedste i Danmark: Se vinderne af de 15 kategorier ved Microsoft Partner Awards
Læs mere »
Her er Danmarks bedste Microsoft-Partner: Fellowmind vinder for andet år i træk
I sidste øjeblik: Danmarkshistoriens største GDPR-retssag mod det offentlige udskydes på ubestemt tid
Har fået nok af kunders ringe sikkerhed: Nu skal alle Azure-brugere tvinges til multifaktor-login
Se alle »
Job & Karriere
Teaser billede
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
Læs mere »
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Får du den løn, du fortjener? Få overblikket over hvor meget dine kolleger tjener hver måned
Google fyrer hele sit Python-team
Se alle »
White paper
Teaser billede
MDR: Transparent sikkerhed og overvågning i realtid
Læs mere »
Få mere ud af din cloudinfrastruktur og gør op med de konstant stigende omkostninger
Whitepaper: Komplet sikkerhedsguide til Kubernetes
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »