Hoe het dode punt van een afbeelding uit te lijnen met bootstrap

Ik gebruik het bootstrap-framework en probeer een afbeelding horizontaal gecentreerd te krijgen zonder succes..

Ik heb verschillende technieken geprobeerd, zoals het splitsen van het 12-rastersysteem in 3 gelijke blokken, bijvoorbeeld

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Wat is de gemakkelijkste methode om een afbeelding gecentreerd te krijgen ten opzichte van de pagina?

Antwoord 1, autoriteit 100%

Twitter Bootstrap v3.0.3 heeft een klasse: center-block

Inhoudsblokken centreren

Stel een element in om weer te geven: blokkeren en centreren via marge. Verkrijgbaar als mixin en klasse.

Je hoeft alleen maar een klasse .center-blocktoe te voegen aan de img-tag, ziet er zo uit

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

In Bootstrap heeft al css-stijl call .center-block

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

Je kunt hier

een voorbeeld bekijken van

Antwoord 2, autoriteit 53%

De juiste manier om dit te doen is

<div class="row text-center">
  <img ...>
</div>

Antwoord 3, autoriteit 43%

Update 2018

De klasse center-blockbestaat niet meer in Bootstrap 4. Gebruik mx-auto d-block…

om een afbeelding in Bootstrap 4 te centreren.

<img src="..." class="mx-auto d-block"/>

Antwoord 4, autoriteit 30%

Voeg ‘center-block’ toe aan afbeelding als klasse – geen extra CSS nodig

<img src="images/default.jpg" class="center-block img-responsive"/>

Antwoord 5, autoriteit 19%

Twitter bootstrap heeft een klasse die centreert: .pagination-centered

Het werkte voor mij om te doen:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

De css voor de klas is:

.pagination-centered {
  text-align: center;
}

Antwoord 6, autoriteit 13%

U kunt het volgende gebruiken. Het ondersteunt Bootstrap 3.x hierboven.

<img src="..." alt="..." class="img-responsive center-block" />

Antwoord 7, autoriteit 10%

Ervan uitgaande dat er niets anders naast de afbeelding staat, is de beste manier om text-align: centerte gebruiken in de imgparent:

.row .span4 {
    text-align: center;
}

Bewerken

Zoals vermeld in de andere antwoorden, kunt u de bootstrap CSS-klasse .text-centertoevoegen aan het bovenliggende element. Dit doet precies hetzelfde en is beschikbaar in zowel v2.3.3als v3

Antwoord 8, autoriteit 6%

Werkt voor mij. probeer center-block

te gebruiken

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

Antwoord 9, autoriteit 2%

Ik heb hetzelfde nodig en hier vond ik de oplossing:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

en naar CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Antwoord 10

U kunt de marge-eigenschap gebruiken met de bootstrap img-klasse.

.name-of-class .img-responsive { margin: 0 auto; }

Antwoord 11

Ik gebruik de klasse justify-content-centervoor een rij binnen een container. Werkt goed met Bootstrap 4.

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

Antwoord 12

Het lijkt erop dat we een nieuwe HTML5-functie kunnen gebruiken als de browserversie geen probleem is:

in HTML-bestanden :

<div class="centerBloc">
  I will be in the center
</div>

En in het CSS-bestand schrijven we:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

En dus zou de div perfect in het midden van de browser kunnen staan.

Antwoord 13

U moet

. gebruiken

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>
.fluid-img {
    margin: 60px auto;
}
@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

Antwoord 14

Ik heb dit gemaakt en toegevoegd aan Site.css.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

Antwoord 15

U kunt de CSS van de vorige oplossing als volgt wijzigen:

.container, .row { text-align: center; }

Dit zou ook alle elementen in de bovenliggende divmoeten centreren.