• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text Genau Zentrieren

lemon1337

Neues Mitglied
hey leute,
ich bin neu in der css welt und auch wenn es extrem einfach ist, ich kriege meinen text im footer nicht zentriert :(

horizontal ist er zwar zentriert, jedoch nicht vertikal..

html code:
HTML:
<html>  
    <title>sefsefsefwegrhea</title>
  
<link rel="stylesheet" type="text/css" href="design.css"></link>
</head>

<body>

    <div id="header">

    </div>

    <div id="main">

    </div>

    <div id="footer">
      
        <div id="f1">
        Text1
        </div>
      
        <div id="f2">
        Text2
        </div>
      
        <div id="f3">
        Text3
        </div>
      
        <div id="f4">
        Text4
        </div>
      
        <div id="f5">
        Text5
        </div>
      
      
    </div>
  
</body>
</html>

css code:
Code:
body {
background-color:#FFFFFF;
margin:0;
padding:0;
}
#header {
width:100%;
height:7%;
background:#434446;
}
#main {
width:100%;
height:88%;
background:#2E2F31;
}
#footer {
width:100%;
height:5%;
background:#FFFFFF;
}
#f1 {
width:20%;
font-size:12px;
color:black;
text-align: center;
float:left;
}
#f2 {
width:20%;
font-size:12px;
color:black;
text-align: center;
float:left;
}
#f3 {
width:20%;
font-size:12px;
color:black;
text-align: center;
float:left;
}
#f4 {
width:20%;
font-size:12px;
color:black;
text-align: center;
float:left;
}
#f5 {
width:20%;
font-size:12px;
color:black;
text-align: center;
float:left;
}

hoffe ihr könnt mir helfen :)

mfg lemon
 
Zuletzt bearbeitet:
Werbung:
Verzichte auf float und nutze "display: block;" für die einzelnen Elemente im Footer. Außerdem würde ich dir raten eher Klassen zu verwenden als so viele IDs zu erzeugen.
 
Werbung:
Könntest du z. B. mit...
Code:
#footer {
    padding: 2% 0;
}
...machen. Also einfach dem Footer oben und unten einen Abstand zum Inhalt geben.

//EDIT: zu spät :)
 
Werbung:
sollte ich bei der größenbestimmung der haupt div's lieber mit px anstatt % arbeiten?
ich habe % genommen weil es dann ja auf jeder auflösung gleich aussehen sollte..
 
Entweder nimmst du % oder du setzt dich mit media-queries auseinander. Mit media-queries hast du z. B. die Möglichkeit bei einer bestimmten Auslösung Teile deiner Seite auszublenden und anders zu formatieren usw.
 
Werbung:
Zurück
Oben