Positionieren von text über Bild (html,css)

Haben Sie eine Reihe von verschiedenen Optionen, die Sie nutzen können, jeder mit seinen pros & cons und mit einem Unterschied in der browser-Unterstützung:

1. Flexbox: (Unterstützung)

Flexbox ist die einfachste option, die Sie haben, ohne Verwendung von Tabellen oder dass man Ihre Elemente aus dem document flow, aber es ist nicht so stark unterstützt wie andere praktikable Möglichkeiten. Ich habe Vertrauen, es wird schon bald genug.

Code:

CSS:

/* --- CSS --- */
.background {
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    color: #000;
    font-size: 2em;
    font-family: sans-serif;
}

HTML:

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

2. Line-height: (Unterstützung)

Wenn Sie diese option verwenden, müssen Sie sicherstellen, dass:

• die Zeilenhöhe der Titel ist gleich, um die Höhe des Containers und
• der Titel ist ein one-liner.

_{(Ansicht Hinweis #2)}

Code:

CSS:

/* --- CSS --- */
.background {
    height: 10em;
    text-align: center;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    color: #000;
    font-size: 2em;
    margin: 0 auto;
    font-family: sans-serif;
    line-height: 5em; /* container height /2 */
}

HTML:

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

3. Position: Absolute & Transform: (Unterstützung)

Dies ist die wohl insgesamt am meisten verwendete Methode, wie breit genug unterstützt, aber es hat den Nachteil, dass bekommt das element (Titel) aus dem normalen Fluss.

Code:

CSS:

/* --- CSS --- */
.background {
    height: 10em;
    position: relative;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    top: 50%;
    left: 50%;
    margin: 0;
    color: #000;
    font-size: 2em;
    position: absolute;
    font-family: sans-serif;
    transform: translate(-50%, -50%);
}

HTML:

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

4. Tabelle (Unterstützung)

Gut, werde ich wahrscheinlich gelyncht, wenn jemand findet das heraus, Sie kann aber display: table für den container und display: table-cell für den Titel nutzen die Angleichung der Tabellen.

Können Sie nun in der Mitte Ihr Titel:

• horizontal, mithilfe text-align: center und
• vertikal, mithilfe vertical-align: middle

Code:

CSS:

/* --- CSS --- */
.background {
    width: 100%;
    height: 10em;
    display: table;
    background-size: cover;
    background-position: center;
}

.background > h4 {
    color: #000;
    font-size: 2em;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    font-family: sans-serif;
}

HTML:

<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
  <h4>Hello, world!</h4>
</div>

Hinweise:

1. Da sind wir mit einem leeren div für unser Bild der height muss explizit definiert werden, zu allen Zeiten.
2. Mit line-height zu zentrieren eines Elements vertikal verlangt, dass die line-height ist gleich auf die Höhe des übergeordneten Elements. In diesem Fall 50% des übergeordneten Höhe verwendet wird, aufgrund der Tatsache, dass die font-size der Titel ist 2x die font-size des Mutterunternehmens und seiner äußert sich in ems.
3. Mit Bezug auf die @media Abfrage, die Sie erwähnt, sollte es nicht verwendet werden, für einfache Sachen wie das zentrieren von text, sondern eher für das anzeigen/ausblenden von Elementen basierend auf Bildschirmgröße, usw.
4. Wenn Sie sich sorgen über die Tragbarkeit von Ihrer website auf die kleineren Bildschirme, mein Rat ist, zu vermeiden, mit px (Pixel), sondern % (Prozentsätze) aktualisiert wird, basiert auf den Bildschirm oder em (ems), aktualisieren Sie manuell die font-size der container mit einem @media Abfrage.

Nicht, verwenden Sie den media-query für das zentrieren von text jedes mal, wenn Sie die Größe des Bildschirms. Die Lösung unten funktioniert.

CSS

.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}

HTML

<div class="container">
  <img src="" >
  <div class="center">Centered</div>
</div>