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


#1

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.


#2

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/


#4

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…


#5

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.)


#6

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.


#7

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.


#8

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

DANKE!

Gruss T.


#9

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.


#10

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/