text-align:center; funktioniert nicht?
Ich versuche schon seit geraumer Zeit dieses Problem zu lösen, doch ich komme einfach nicht dahinter, vielleicht kann mir hier jemand netterweise bei meinem Problem weiterhelfen.
<!DOCTYPE html>
<style>
body{
font-family: Georgia, 'Times New Roman', Times, serif;
}
#top{
text-align: center;
}
#logo{
color:rgb(255, 255, 255);
background-color: crimson;
display: inline-flex;
font-size: 32px;
font-weight: bold;
padding: 8px;
margin-top: 16px;
}
#logo-name {
font-size: 32px;
font-weight: bold;
margin: 16px;
text-align: center;
}
</style>
<html>
<head>
<title> Homepage </title>
</head>
<body>
<div id="top"></div>
<div id="logo">OH</div>
<div id="logo-name">Homepage</div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>
3 Antworten
Wie schon von anderen Antwortgebern geschrieben: In dem Container #top ist kein Inhalt, der zentriert werden könnte. Da du in einem Kommentar schreibst, dass du dein Logo zentriert haben möchtest, könntest du allerdings #logo und #logo-name in diesen Container packen und würdest somit zum erwünschten Ergebnis kommen.
<header id="top">
<div id="logo">OH</div>
<div id="logo-name">Homepage</div>
</header>
In dem Zuge würde ich aus dem div auch gleich ein header-Element machen. Das beschreibt schließlich den Inhalt besser.
Für die beiden anderen Container:
<div id="main"></div>
<div id="footer"></div>
kannst du ebenfalls ausdrucksstärkere Elemente verwenden, da sie HTML jeweils in petto hat:
<main id="main"></main>
<footer id="footer"></footer>
Ob du deine ID-Selektoren dann noch beibehalten möchtest oder stattdessen Elementselektoren einsetzt:
header {
/* your styles from #top ... */
}
main {
/* your styles from #main ... */
}
footer {
/* your styles from #footer ... */
}
kannst du dir dann ja nochmal überlegen.
Der gesamte style-Tag (wie auch schon von anderen geschrieben) muss, falls du es nicht schon getan hast, in den head-Bereich verschoben werden. Alternativ könntest du das CSS auch in eine externe Datei auslagern, um deine Styles besser vom Markup zu trennen und für mehr Übersicht zu sorgen. Lies dazu hier.
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style>
/* your styles ... */
</style>
</head>
<!-- etc. ... -->
Außerhalb des html-Elements sind keine anderen HTML-Tags zulässig (ausgenommen: Kommentare). Die einzigen erlaubten Kindelemente eines html-Tags sind head und body. Im head werden Metainformationen aufgeführt, die das Dokument allgemein beschreiben (Titel, Zeichenkodierung, genutzte Ressourcen wie CSS, ...), im body liegen die konkreten Seiteninhalte.
- Der Style Tag gehört in den Head Bereich
- Es ist schöner das ganze in eine CSS Datei auszulagern
- #Top kann nicht nicht center sein, weil es keinen Text hat. Text Align Center macht das, wie es heißt, es zentriert einen Text
- Schau dir mal Klassen an. ID's kann man zwar benutzen, sind aber nicht für den Hauptgebrauch für Styles gemacht
Du musst das style-Attribut innerhalb vom <head> unterbringen, nicht irgendwo außerhalb.
Die Eigenschaft text-align: center; wirkt sich nur auf Inline-Inhalte eines Elementes aus, nicht auf das Element selbst.
Ich kann dein Problem daher nicht nachvollziehen. Bei mir wird "Homepage" zentriert.
So wie ich es geschrieben habe meine ich das.
Das "Logo" ist ein inline-flex-Element. Das kannst Du nicht per text-align zentrieren aus o.g. Gründen. Welche Möglichkeiten es zur Zentrierung gibt ist z.B. hier beschrieben:
https://www.drweb.de/elemente-zentrieren-css/
Sorry das habe ich nicht erwähnt, ich wollte das Logo zentriert haben, doch iwie funktioniert das mit text-align nicht.
und wie meinst du das mit style attribut innerhalb von <head>?