Zentrieren Sie ein tag innerhalb a

Lesezeit: 3 Minuten

Benutzeravatar von VansFannel
Vans Fannel

Ich habe folgendes <div> in einem <body> Schild:

<div id="AlertDiv"><h1>Yes</h1></div>

Und das sind ihre CSS-Klassen:

#AlertDiv {
    position:absolute;
    height: 51px;
    left: 365px;
    top: 198px;
    width: 62px;
    background-color:black;
    color:white;
}

#AlertDiv h1{
    margin:auto;
    vertical-align:middle;
}

Wie kann ich vertikal und horizontal ausrichten an <h1> innerhalb von a <div>?

AlertDiv wird größer sein als <h1>.

Benutzeravatar von Marcel
Marcel

Du kannst hinzufügen line-height:51px zu #AlertDiv h1 wenn Sie wissen, dass es immer nur eine Zeile sein wird. Auch hinzufügen text-align:center zu #AlertDiv.

#AlertDiv {
    top:198px;
    left:365px;
    width:62px;
    height:51px;
    color:white;
    position:absolute;
    text-align:center;
    background-color:black;
}

#AlertDiv h1 {
    margin:auto;
    line-height:51px;
    vertical-align:middle;
}

Die folgende Demo verwendet auch negative Margen, um die #AlertDiv auf beiden Achsen zentriert, auch wenn die Größe des Fensters geändert wird.

Demo: jsfiddle.net/KaXY5

  • Ja, es wird nur eine Zeile sein. Danke für deine Antwort.

    – Vans Fannel

    6. Juni 2011 um 16:07 Uhr

  • Dies ist wirklich die einzig wirklich gültige Antwort: Sie machen height und line-height gleich und dann funktioniert das CSS-Attribut vertical-align. Nachdem ich hoch und tief danach gesucht hatte, ist dies alles, was herauskam.

    – Femi

    6. Juni 2011 um 16:13 Uhr

Auf dem hX-Tag

width: 100px;
margin-left: auto;
margin-right: auto;

  • Warum ist das width-Attribut erforderlich, damit die automatische Links/Rechts-Funktion funktioniert?

    – Bächler

    5. Januar 2017 um 20:01 Uhr

  • In meinem Fall funktionierte es, indem ich einfach Breite hinzufügte, da der Text bereits zentriert war! Danke. Sehr einfache Antwort, die in den meisten Fällen funktioniert.

    – pollux1er

    14. September 2020 um 16:50 Uhr

Es gibt einen neuen Weg, Transformationen zu verwenden. Wenden Sie dies auf das zu zentrierende Element an. Es stupst um die halbe Containerhöhe nach unten und „korrigiert“ dann um die halbe Elementhöhe.

position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

Es funktioniert die meiste Zeit. Ich hatte ein Problem, wo a div war in einem div in einem li. Das Listenelement hatte eine festgelegte Höhe und die äußere divs aus 3 Säulen (Stiftung). Die Divs der 2. und 3. Spalte enthielten Bilder und ließen sich mit dieser Technik gut zentrieren, jedoch benötigte die Überschrift in der ersten Spalte ein umschließendes Div mit einer explizit festgelegten Höhe.

Weiß jemand, ob die CSS-Leute an einer Möglichkeit arbeiten, Dinge einfach auszurichten? Als ich sah, dass es 2014 ist und sogar einige meiner Freunde regelmäßig das Internet nutzen, fragte ich mich, ob jemand schon in Betracht gezogen hatte, dass die Zentrierung ein nützliches Styling-Feature wäre. Also nur wir?

  • Ich verwende diese Technik, um einige Elemente in Situationen horizontal auszurichten, in denen text-align:center; funktioniert nicht richtig. position:relative; left:50%;transform:translateX(-??%)... “???” muss angepasst werden, je nachdem wie breit das Element ist. Ich weiß, es ist ein bisschen hacky, aber es scheint auf den Bildschirmen zu funktionieren, auf denen ich es bisher ausprobiert habe.

    – weißer Bart

    9. August 2015 um 11:59 Uhr

  • Das habe ich mit gefunden transform:translateX(-??em) ist tatsächlich zuverlässiger bei verschiedenen Bildschirmgrößen als ??%

    – weißer Bart

    11. August 2015 um 1:44 Uhr

  • Abgesehen davon – das neue Video zum Zentrieren vom Chrome-Entwicklerteam bei Google ist ziemlich cool youtube.com/watch?v=ncYzTvEMCyE

    – Lukas Puppet

    18. Januar 2021 um 14:13 Uhr


<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
    <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>

Du kannst den Code hier ausprobieren:

http://htmledit.squarefree.com/

Gestartet a jsFiddle hier.

Es scheint die horizontale Ausrichtung arbeitet mit einem text-align : center. Ich versuche immer noch, die vertikale Ausrichtung zum Laufen zu bringen; vielleicht verwenden müssen absolute positionieren und so top: 50% oder eine vorberechnete padding von oben.

Sie könnten Polsterung hinzufügen h1:

#AlertDiv h1 {
  padding:15px 18px;
}

Benutzeravatar von Nicu Surdu
Nicu Surdu

Sie können verwenden display: table-cell um das div als Tabellenzelle zu rendern und dann zu verwenden vertical-align wie Sie es in einer normalen Tabellenzelle tun würden.

#AlertDiv {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Du kannst es hier versuchen:
http://jsfiddle.net/KaXY5/424/

1436610cookie-checkZentrieren Sie ein tag innerhalb a

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy