Heim >Web-Frontend >CSS-Tutorial >CSS-Bildzentrierung: CSS-Bild wird nach oben, unten, links und rechts zentriert (horizontal und vertikal zentriert)

CSS-Bildzentrierung: CSS-Bild wird nach oben, unten, links und rechts zentriert (horizontal und vertikal zentriert)

PHPz
PHPzOriginal
2017-05-31 11:32:2410356Durchsuche

In unserem Webseitenlayout müssen wir häufig das DIV+CSS-Layout verwenden, um das Bild horizontal, links und rechts sowie vertikal und vertikal zu zentrieren. Dieser Artikel fasst mehrere Methoden zusammen, mit denen Sie mit DIV+CSS das Bild links und rechts/horizontal sowie nach oben und unten/vertikal zentrieren können!

CSS-Bildzentrierungsmethode links/rechts:

1. Wie zentriert man Text und Bilder im HTML-Code?

CSS-Bildzentrierung: CSS-Bild wird nach oben, unten, links und rechts zentriert (horizontal und vertikal zentriert)

HTML-Textzentrierung und HTML-Bildzentrierung, indem Textzentrierung und Bildzentrierung in HTML realisiert werden. Es gibt drei Methoden, um die Zentrierung von Text- und Bildinhalten zu realisieren html. Zwei davon werden mithilfe von CSS-Stilen implementiert, wobei immer „align="center"“ (zentriert) zum ursprünglichen HTML-Tag hinzugefügt wird.

2.

Zusammenfassung verschiedener Zentrierungen im CSS-Layout

Zentrierung ist eine Situation, der wir häufig begegnen, wenn wir CSS für das Layout verwenden. Bei der Verwendung von CSS zum Zentrieren reicht manchmal ein einzelnes Attribut aus, und manchmal sind bestimmte Fähigkeiten erforderlich, um mit allen Browsern kompatibel zu sein. Dieser Artikel gibt eine kurze Einführung in einige gängige Zentrierungsmethoden.

CSS-Bild nach oben und unten/vertikale Zentrierungsmethode:

1.

Über das Transformationsattribut in CSS3 zur Implementierung von div mit Variabler Breite und Höhe, vertikale und horizontale Zentrierung Detaillierte Einführung

CSS-Bildzentrierung: CSS-Bild wird nach oben, unten, links und rechts zentriert (horizontal und vertikal zentriert)

Ich glaube, dass Sie in tatsächlichen Projekten definitiv auf das Problem von DIV mit variabler Breite und Höhe, vertikal, stoßen werden und horizontale Zentrierung. Ich erinnere mich, dass ich es zuvor mit js implementiert habe.

Tatsächlich gibt es mehrere Möglichkeiten, es mit CSS zu implementieren. Ich persönlich denke jedoch, dass die Verwendung von Transform einfacher und bequemer ist, aber mit Browsern unter IE9 ist es nicht kompatibel.

2. Detaillierte Beispiele für zwei gängige Methoden zur horizontalen und vertikalen Zentrierung von Elementen in CSS

Dieser Artikel Wir haben zwei Möglichkeiten zur horizontalen und vertikalen Zentrierung von Elementen in CSS vorgestellt. Der Artikel bietet einen vollständigen Beispielcode für Ihr Studium oder Ihre Arbeit unten. . 1. Das Flex-Layout des übergeordneten Elements realisiert die horizontale und vertikale Zentrierung des Elements. 2. Die absolute Positionierung und der negative Randwert realisieren die horizontale und vertikale Zentrierung des Elements. „Verwenden Sie reines CSS, um ein Bild unbekannter Größe (aber sowohl Höhe als auch Breite weniger als 200 Pixel) horizontal und vertikal in einem quadratischen Container mit 200 Pixeln zu zentrieren.“Natürlich ist die Frage nicht zufällig, sondern hat ihre eigenen praktischen Gründe. Vertikale Zentrierung ist Taobao. Eines der häufigsten Probleme bei der Arbeit ist sehr repräsentativ

4 7 Möglichkeiten, den Container horizontal und vertikal mit CSS zu zentrieren

Diese Art von CSS-Layout wird häufig verwendet und ist auch eine häufige Frage in Vorstellungsgesprächen. Nach einer Online-Suche werden Sie viel davon finden, aber ich möchte es trotzdem selbst zusammenfassen. Methoden dieser Art gibt es viele. Dieser Artikel fasst nur einige davon zusammen, um den Eindruck zu vertiefen.

Fragen und Antworten zur DIV+CSS-Bildzentrierung:

1. Wie zentriere ich ein Bild?

Warum erscheint das Bild nicht zentriert, obwohl ich in


3.

So zentrieren Sie die Elemente der eingebetteten Iframe-Seite. 4. Das Problem mit der oberen und unteren Zentrierung von Android-Browsern

Das obige ist der detaillierte Inhalt vonCSS-Bildzentrierung: CSS-Bild wird nach oben, unten, links und rechts zentriert (horizontal und vertikal zentriert). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn