Søg
Avatar billede 4b4 Nybegynder
13. juni 2008 - 19:59 Der er 9 kommentarer og
1 løsning

Center og middle uden at definere højde/brede i pixels

Når jeg centerer noget både horisontalt og vertikalt anvender jeg normalt nedenstående:

<table width="100%" height="100%" align="center" valign="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div align="center">
      <table border="0" cellspacing="0" cellpadding="0">
    <tr>
          <td align="left" valign="top">
          DET HER STÅR I MIDTEN VERTIKALT / HORISONTALT
          <td>
        </tr>
      </table>
    </div></td>
  </tr>
</table>



Findes der ikke en nememre måde at gøre det i CSS .. simpelt?

VIGTIGT! Højden at mit indhold varierer.. og jeg ønsker ikke at ændre i CSS/HTML sourcen hver gang mit indhold ændres.. det skal jeg vel hvis det laves i CSS!?
Avatar billede Slettet bruger
13. juni 2008 - 20:13 #1
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Avatar billede 4b4 Nybegynder
13. juni 2008 - 20:20 #2
I det eksempel er højden af div'en defineret. Hvilket ikke er hensigten her.
Avatar billede Slettet bruger
13. juni 2008 - 20:28 #3
Ok...

Men hva så med denne her:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
    <!--
    body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
    }
    #horizon       
        {
        color: white;
        background-color: #0ff;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 0px;
        width: 100%;
        height: 1px;
        overflow: visible;
        visibility: visible;
        display: block
        }
    #content   
        {
        font-family: Verdana, Geneva, Arial, sans-serif;
        background-color: #f00;
        margin-left: -125px;
        position: absolute;
        top: -35px;
        left: 50%;
        width: 250px;
        height: ;
        visibility: visible
        }
    -->
</style>

</head>
<body>

<div id="horizon">
            <div id="content">
                    This text is<br>
                    and stays there!
            </div>
        </div>

</body>
</html>
Avatar billede Slater Ekspert
13. juni 2008 - 20:28 #4
Det kan ikke lade sig gøre i CSS. Jo, du kan bruge margin: auto; - men det virker ikke på Internet Explorer 6, så hvis du vil gøre det med dynamisk indhold, må du bruge en tabel til at indeholde det hele. Desværre. - Med mindre du kan leve med at det ikke er centreret i højden på IE.
Avatar billede Slettet bruger
13. juni 2008 - 20:35 #5
Ok... ja, så står jeg af her. Forhåbentligt kan andre hjælpe dig videre. :-)
Avatar billede 4b4 Nybegynder
13. juni 2008 - 20:38 #6
Viperine: Så eneste mulige løsning er rent faktisk at gøre som jeg har gjort fra starten... Smide en table i en table i en table.. etc?

Extend: Du gjorde god figur :)
Avatar billede 4b4 Nybegynder
13. juni 2008 - 20:42 #7
Eller rettere.. er det så den korrekte måde jeg har gjort det på i ovenstående?

Se eksempelvis: www.bergsorensen.dk/test :)
Avatar billede 4b4 Nybegynder
15. juni 2008 - 13:56 #8
vi lukker :)
Avatar billede Slettet bruger
15. juni 2008 - 16:42 #9
Det ser umiddelbart fint ud, men:
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin: 0;

Kan skæres ned til:
    margin: 0;

Både fordi "margin: 0;" alligevel samler alle erklæringerne for margin i éen samlet erklæring. Og også fordi den sidst angivne erklæring "overskriver" de foregående erklæringer. :-)

Og så ville "paddin: 0;" også være korrekt at indsætte. :-)
Måske det ville fjerne den besynderlige horisontale scrollbar...? Ellers aner jeg nemlig ikke hvor den kommer fra. :-/

Ellers pænt design. :-)
Avatar billede Slettet bruger
15. juni 2008 - 16:43 #10
UPS! Det hedder selvfølgelig
padding: 0;
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
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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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
22/0120:51 Knap til ipad Af FinnLauridsen i Excel
21/0113:53 Icloud mail via Outlook Af lbc i E-mail programmer
21/0108:32 USB NØGLE gratis Af nu_igen i Andet hardware
20/0121:11 Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
20/0116:10 Tomt felt i Start Af ErikHg i Windows
White papers
Flere white papers »