die unteren senkrechten ausrichten einer h3-text mit 100% Höhe

Klar zu sein, ich bin nicht daran interessiert, vertikales ausrichten der h3 unten ein div oder ein anderes block-element. Das kenne ich schon.

Ich habe eine h3 mit 100% Höhe. Ich will vertikal ausrichten von text in der h3 nach unten.

Hier ein Fiddle.

div {
    border: 1px solid #ccc;
    height: 200px;
    text-align: center;
    width: 150px;
}
h3 {
    height: 100%;
    vertical-align: bottom;
}

<div>
    <h3>Kitchen Experiments</h3>
</div>

InformationsquelleAutor Jumbalaya Wanton | 2013-12-20

  1. 6

    Dies könnte den trick tun.

    Für den folgenden HTML-Code:

    <div>
    <h3>Kitchen Experiments</h3>
</div>

    gelten die folgenden CSS:

    div {
    border: 1px solid #666;
    height: 200px;
    text-align: center;
    width: 150px;
}

h3 {
    height: inherit;
    vertical-align: bottom;
    background-color: pink; /* optional to show extent of element */
    margin: 0;
    display: table-cell;
}
h3:after { /* trick to add bottom padding */
    content: '';
    display: block;
    height: 10px; 
}

    Gelten display: table-cell zu h3 und Erben die Höhe (anstatt 100%).

    Den Eltern div ist immer noch ein block-element, so wird es wahrscheinlich Verhalten sich dementsprechend (aber Sie müssen versuchen, diese selbst).

    Wenn Sie brauchen, um die Kontrolle der unteren Polsterung zwischen dem text und dem übergeordneten block,
    Sie können die Regel mit dem pseudo-element.

    Demo: http://jsfiddle.net/audetwebdesign/RJ6YM/

    InformationsquelleAutor Marc Audet

  2. 4

    Schreiben:

    div {
    display:table;
}

h3 {
    vertical-align: bottom;
    display:table-cell;
}

    Aktualisiert Geige hier.

    +1 guter Tipp, aber ich kann das nicht display: table; - Es beeinträchtigt mein responsive layout.

    InformationsquelleAutor Hiral

  3. 1

    Können Sie tun, dass durch die absolute Positionierung Ihres H3 - element innerhalb des div. Hier ist eine aktualisierte fiddle http://jsfiddle.net/7Lcvy/2/

    Das passt nicht zu meinen Bedürfnissen; es entfernt mein height: 100% Höhe Anforderung.
    Und warum ist das eine Voraussetzung?
    Es spielt keine Rolle, aber es gibt einen guten Grund dafür. Es ist zu lang für einen Kommentar, aber meine Frage ausdrücklich erklärt, dass Anforderung.
    sehr gut, dann aber, wie etwa die Kapselung der text in den <h3> in einem Zeitraum, können Sie Ihre position relativ zu den h3. Es gibt keine "saubere" Lösung für Ihr problem.
    Was zum Teufel, lassen Sie mich erklären: Das umgebende div muss angeklickt werden. Es leitet auf eine Stelle über JS. Aber der div hat ein ajax-button, der, wenn darauf geklickt wird, sollte die Durchführung einer anderen Anfrage. Leider ist das click-Ereignis propagiert von der Taste, um das div, und bricht die ajax-Anfrage, wie es führt die Umleitung. Aufruf e.stopPropagation() bricht die ajax. Mit 100% Höhe erlaubt es mir, die h3 anklickbar, ohne die Schaltfläche ajax.

    InformationsquelleAutor Caelea

  4. 0

    Für diejenigen, die verwenden können, flexbox, hier ist ein flex alternative:

    div {        
  display: flex;
  ...
}

h3 {
  display: flex;
  align-self: center;
  ...
}

    http://jsfiddle.net/mrchief/62a7djxh/1/

    InformationsquelleAutor Mrchief

Schreibe einen Kommentar