Heim > Web-Frontend > CSS-Tutorial > Wie kann ich Bilder in Bootstrap einfach horizontal zentrieren?

Wie kann ich Bilder in Bootstrap einfach horizontal zentrieren?

Linda Hamilton
Freigeben: 2024-10-27 02:13:02
Original
697 Leute haben es durchsucht

How Can I Easily Center Images Horizontally in Bootstrap?

Bilder horizontal mit Bootstrap ausrichten: The Elusive Center

Im Bereich der Webentwicklung ist eine häufige Herausforderung für viele die Aufgabe Bilder horizontal zentrieren, ohne auf unzuverlässige Techniken zurückzugreifen. Wenn Sie das beliebte Bootstrap-Framework verwenden, werden Sie erleichtert sein zu wissen, dass es eine einfache Lösung für dieses rätselhafte Problem gibt.

Betreten Sie die Pracht des Bootstrap-Center-Blocks

Bootstrap Version 3.0.3 führt eine Klasse mit dem treffenden Namen „center-block“ ein, die mühelos das Dilemma löst, Bilder genau mit bloßen Codezeilen auszurichten. Diese geniale Klasse fügt einfach die CSS-Eigenschaften hinzu:

1

2

3

display: block;

margin-left: auto;

margin-right: auto;

Nach dem Login kopieren

Durch die Einbindung dieser Klasse in Ihr Bild-Tag, wie unten dargestellt, können Sie den gewünschten horizontalen Zentrierungseffekt erzielen:

1

2

3

4

5

6

7

<div class="container">

  <div class="row">

    <div class="span4"></div>

    <div class="span4"><img class="center-block" src="logo.png" /></div>

    <div class="span4"></div>

  </div>

</div>

Nach dem Login kopieren

Die Der Vorteil der Center-Block-Klasse liegt in der Möglichkeit, die Ränder automatisch anzupassen und sicherzustellen, dass Ihr Bild unabhängig von seiner Breite perfekt zentriert bleibt. Keine Kopfschmerzen mehr! Ihre Bilder verleihen Ihren Webseiten ein neues Gleichgewicht.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder in Bootstrap einfach horizontal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage