Bildposition mit CSS manipulieren

Einführung

Ich experimentiere schon seit geraumer Zeit mit CSS und HTML und bin ehrlich gesagt überrascht, dass ich noch nie mit dem Problem konfrontiert war, ein Bild zusammen mit Text vertikal in einem Container zu zentrieren. Es ist sehr einfach, die Bildpositionierung selbst und die Textpositionierung zu ändern. Es ist auch einfach, beides zusammen zu manipulieren. Was ich tun wollte, war, sowohl das Bild als auch den Text in denselben Container zu platzieren, das Bild links auszurichten und die Kopfzeile in der Mitte auszurichten.

Die Herausforderung

Der von mir verwendete Text war die Überschrift meiner Website mit dem HTML-Element

Element ist ein Inline-Element, was bedeutet, dass es gerne mit anderen in derselben Zeile spielt. Natürlich könnte ich mit der CSS-Eigenschaft float herumspielen, aber es gibt ein Problem. Sobald ich Float für ein Element einführe, wird dieses Element aus dem Dokumentfluss entfernt. und es wird schwierig, das Verhalten dieses Elements zu kontrollieren.

Optionen

Wie bereits erwähnt, habe ich versucht, float: left und float: inline-start zu verwenden, aber es verhält sich nicht immer so, wie ich es möchte. Als Best Practice versuche ich, so weit wie möglich die neuesten Techniken zu verwenden, und hier kam die moderne Flex- und CSS-GridBox ins Spiel. Wenn Flexbox dem übergeordneten Container zugewiesen wird, richtet sie den gesamten Inhaltstext wie unten gezeigt links aus.

Nach vielen Versuchen und Irrtümern kam es darauf an, Spezifität zu verwenden und minimalistisch vorzugehen. Ich wollte auch die Möglichkeit haben, Bilder zu formatieren, die ich unabhängig auf der Website verwenden könnte, sodass ich keine Stilisierung auf das Kernelement img angewendet habe. Ich habe mehrere Klassen erstellt, um die Bilder zu manipulieren, und diese angewendet. Während all dieser Versuche und Irrtümer machte mir ein anderes Problem zu schaffen. Mit allen mir bekannten Techniken gelang es mir nicht, das Bild in der Mitte des übergeordneten Containers auszurichten. Ich habe mit der Eigenschaft align-self recherchiert und es ausprobiert. Das hat endlich funktioniert. Ich wollte dies nicht auf das Kernelement img anwenden und keine Klasse dafür erstellen, also habe ich den Child-Kombinator verwendet, um auf das spezifische img-Element abzuzielen, das ein untergeordnetes Element des Header-Elements ist (header > img). . Damit war das Problem der Bildausrichtung erledigt.

Das nächste Problem bestand darin, den Kopfzeilentext in der Mitte auszurichten. Ich habe alle mir bekannten Tricks mit text-align, align-self, align-items, justify-self und justify-items ausprobiert. Da das übergeordnete Header-Element jedoch als Flex markiert war, wurden die nachfolgenden Stile nicht angewendet. Schließlich habe ich einen einfachen Trick ausprobiert, um den Inhalt mithilfe von margin: auto zu zentrieren, und das hat funktioniert. So sieht die endgültige Ausgabe jetzt aus.

Selbst wenn ich die Höhe des Header-Containers ändere, befinden sich Bild und Text vertikal in der Mitte des Elements und bleiben dort auf der x-Achse.

Endgültiger Code

HTML-Code:

<header class="flexi">
  <img class="round-img small lazy" src="/static/imghwm/default1.png" data-src="img/Mukul-2019.jpg" alt="Mukul Dharwadkar" caption="Picture of Mukul Dharwadkar">
  <h1 class="center-align">
    Mukul Dharwadkar
  </h1>
</header>

CSS-Code:

header {
    width: 900px;
    margin: auto;
    height: 120px;
    background-color: antiquewhite;
  }

/* The CSS rule below is highly specific for an img element that is a child of the header element.
Typically there will be only one img element inside the header and therefore this is safe to keep */

header > img {
  align-self: center;
}

.flexi {
  display: flex;
}

.round-img {
  border-radius: 50%;
}

.small {
  width: 100px;
}

.flexi {
  display: flex;
}

.center-align {
  margin: auto;
}

Der vollständige Code befindet sich in meinem Github-Repo. Fühlen Sie sich frei, es zu verwenden.

Abschluss:

Um die perfekte Ausrichtung von Bildern und Text im Webdesign zu erreichen, ist oft das Experimentieren mit verschiedenen CSS-Techniken erforderlich. In diesem Fall erwies sich Flexbox als die effizienteste und modernste Lösung zur Zentrierung von Inhalten innerhalb eines Containers, wobei gleichzeitig die Flexibilität erhalten blieb, das Styling unabhängig anzupassen. Durch die Verwendung gezielter Selektoren wie dem Child Combinator und der Nutzung der Ausrichtungseigenschaften von Flexbox konnte ich das Problem sauber und effizient lösen. Diese Methode optimiert nicht nur den Code, sondern stellt auch sicher, dass zukünftige Anpassungen einfacher zu verwalten sind. CSS kann knifflig sein, aber mit dem richtigen Ansatz können Sie ausgefeilte, professionelle Layouts erstellen.

Das obige ist der detaillierte Inhalt vonBildposition mit CSS manipulieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!