Inhalt header - bereich (in der Höhe) "mittig" oder "flex-end" setzen

Hallo, ich schildere einfach mal mein Problem:

Oben im header (orange gestrichelt /eingestästelt) steht die Überschrift /h4) ziemlich weit oben,
ich würde die aber entweder mittig oder auch unten (flex-end) haben wollen.
Nun ist es aber so, das ein son blau eingekästeltes Element ( Überschrift / Bild / sonst Anmerkungen darunter) nicht nur eine Überschrift hat, sondern auch mal ´zwei (h4s). So habe ich die h4s mit header eingefasst und diesem header eine min-height gegeben, eine genaues hight ist leider nicht möglich da sonst die untere h4 unnter der bild „verschwindet“ (beim zusammenstauchen des Fensters) Dadurch , weil ich eine min-height gegeben hab funktioniert ja das „centern“ oder das flex-end" nicht.
Welche Möglichkeit gäbe es noch, sodass ich die Überschrift nach unten bekomme?

CSS

/Seite Arbeiten/
@media all {
.arbeiten-galerie div {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.arbeiten-galerie>h4 {
display:none;
text-align: center;
margin: 0.3rem 0 0.2rem 0;
}
.arbeiten-galerie div>* {
margin: 0.3rem auto 1rem auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 400px;
}
.arbeiten-galerie div section img:hover {
opacity: .6;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.arbeiten-galerie div section header {
flex-wrap: wrap;
justify-content: center;
align-content: center;
margin: 0 0 0.6rem 0;
padding: 0 0.3rem 0 0.3rem;
min-height: 3rem;
}
.arbeiten-galerie div section h4 {
line-height: 1.5rem;
width: auto;
margin: 0;
padding: 0;
}
.arbeiten-galerie div section p {
margin: 0 0 0 1.3rem;
}
.arbeiten-galerie div section a::before {
content: none;
}
.arbeiten-galerie div section img {
margin: 0 auto;
box-shadow: 5px 5px 5px gray;
border-radius: 0.5rem;
}
}

Grüsse T.

Hi einsiedlerX,

wenn ich dich beim Überfliegen richtig verstanden habe, willst du die Überschrift in der Box vertikal und horizontal Zentrieren.

Versuche es doch mal mit der CSS Funktion "display: table"
http://www.css4you.de/display.html
Allgemeines-Beispiel:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display/Tabelle

Dann könntest du das Kommando: “vertical-align: middle;” (oder “vertical-align: bottom;”) verwenden, damit der Inhalt vertikal Zentriert wird.

Beispie für dein CSS:
https://jsfiddle.net/wzuy9bm3/1/

1 „Gefällt mir“

hi icatch,
bin mir nicht sicher ob ich das so lösen kann, denn mein html sieht wie folgt aus:

ich werde kein weiteres benötigte < div > einbauen können, da sich alles in einem < a > befindet.

:o(

schade…

hi einsiedlerX,

da ich leider deinen CSS nicht kenne, kann ich nur, wie im vorigen JS-Fiddle Script, blanko arbeiten:
https://jsfiddle.net/wzuy9bm3/4/

In dem Beispiel habe ich einfach deine Strucktur übernommen und in die einzelnen Tags immer eine “class” eingefügt (dies geht natürlich auch ohne eine class Angabe.)

1 „Gefällt mir“

hi icatch,

alles gut und schön, aber irgendwie funktioniert das Ganze nicht. Die zwei h4 „tables“ stehen nun nebeneinander.
Wie kommt das zustande? Siehe: LINK
scroll down, dort ist das feld mit den zwei h4

Ich habe nun im html folgendes geändert:

ich habe dort jedem a eine klasse zugeteilt:
< a class=„div-table“ href=„arbeit11.html“ >

mein css sieht dabei so aus (Auszug / das was wichtig ist)
.div-table{
display: block;
width: 100%;
}
.arbeiten-galerie div section header {
display: table;
height: 3.5rem;
width: 100%;
border: 1px dotted red;
}
.arbeiten-galerie div section h4 {
display:table-cell;
vertical-align: middle;
text-align: center;
border: 1px dotted green;
}

Gruss T.

Wenn du das so machen willst, dann brauchst du unbedingt ein „display:table-row“. Dies fehlt bei dir.
Eine Tabelle hat fast immer dieses Gerüst:

table
-row <- fehlt in deinem CSS
–cell

Somit kommst du nicht rum, ein Element (< /div>< /span>…) im „header“ Tag einzufügen, mit einem „display:table-row“

In diesem Bild habe ich die 2 H4-Tags durch einen ersetzt und die Überschriften in zwei < /span>-Elemente gepackt. Das CSS steht im jeweiligen „style“-Attribut.
In diesem Beispiel kannst du dann im H4-Tag (display:table) auch eine Höhe angeben. Somit werden alle Überschriften mit der selben Höhe angezeigt und richten sich automatisch vertikal zentriert aus.

1 „Gefällt mir“

Vielen Dank! Ich denke es funktioniert! LINK
Und es ist richtig so… :o)

DANKE!

Gruss T.

nabend icatch,
eine Frage noch, wenn man nun doch ohne Tabelle arbeiten würde, würdest Du dann auch
mit < span > die < h4 > unterteilen?
Bisher hatte ich im < header > immer < h4 > Übercshrift 1 < /h4 > < h4 > Überschrift 2 < /h4 > verwendet.
Dann war es immer so das beim zusammenstauchen des Fensters die untere < h4 > unters Bild verschwand.
Deshalb hatte ich ein min-height verwendet, deshalb funktionierte das < vertikale flex-end > nicht, deshalb
das mit der Tabelle…
Meine Frage: Wenn man aber < h4 > < span > Übercshrift 1 < /span> < span > Überschrift 2 < /span > < /h4 >
verwendet dann würde auch ein < vertikales flex-end > funktionieren?
Würde man es so machen?

Gute n8 T.

Hi einsiedlerX,

du kannst es theoretisch mit 2 H4-Tags oder den < /span>-Tags im 1 H4-Tag schreiben.
Ich habe in dem Beispiel mit einem H4-Tag gearbeitet, damit dies direkt für die Suchmaschienen etwas angenehmer ist zu lesen.

Ein H1-6 - Tag hat die Deffinition als “Überschrift” und nicht als “Design”-Element.
https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/Überschrift

Dies kann man durch das CSS aber auch zum “Design/Bau/…”-Element machen.
Deshalb hab ich dort zwei < /span> Elemente eingebracht.

Wenn du flex nutzen willst, versuche es so:
https://jsfiddle.net/tL2bpmp2/
Ein Guide zu Flex findest du z.B. hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/