Jak wyrównać martwy punkt obrazu za pomocą paska startowego

Używam frameworka bootstrap i bez powodzenia próbuję wyśrodkować obraz w poziomie.

Próbowałem różnych technik, takich jak podział systemu 12 siatek na 3 równe bloki, np

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

Jaka jest najłatwiejsza metoda wyśrodkowania obrazu względem strony?

Twitter Bootstrap v3.0.3 ma klasę: środkowy blok

Wyśrodkuj bloki treści

Ustaw element do wyświetlenia: blok i środek przez margines. Dostępne jako mixin i klasa.

Wystarczy dodać klasę .center-blockdo imgtagu, wygląda to tak

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

W Bootstrap ma już wywołanie w stylu css .center-block

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

Można zobaczyć próbkę z tutaj

Właściwy sposób to zrobić

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

Aktualizacja 2018

center-blockKlasa już nie istnieje w Bootstrap 4 . Aby wyśrodkować obraz w Bootstrap 4, użyj mx-auto d-block...

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

Dodaj „środkowy blok” do obrazu jako klasę - nie potrzebujesz dodatkowego css

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

Bootstrap na Twitterze ma klasę, która koncentruje się na: .pagination-centered

Udało mi się zrobić:

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

CSS dla klasy to:

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

Możesz użyć następujących. Obsługuje Bootstrap 3.x powyżej.

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

Zakładając, że obok obrazu nie ma nic innego, najlepszym sposobem jest użycie text-align: centerelementu imgnadrzędnego:

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

Edytować

Jak wspomniano w innych odpowiedziach, możesz dodać klasę CSS bootstrap .text-centerdo elementu nadrzędnego. Robi to dokładnie to samo i jest dostępny zarówno w wersji 2.3.3, jak i v3

Pracuje dla mnie. spróbuj użyćcenter-block

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

Potrzebuję tego samego i tutaj znalazłem rozwiązanie:

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

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

i do CSS:

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

Możesz użyć właściwości margin z klasą img bootstrap.

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

Wydaje się, że moglibyśmy użyć nowej funkcji HTML5, jeśli wersja przeglądarki nie stanowi problemu:

w plikach HTML:

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

A w pliku CSS piszemy:

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

Dzięki temu div może być idealnie wyśrodkowany w przeglądarce.

Powinieneś użyć

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

Używam justify-content-centerklasy do wiersza w kontenerze. Działa dobrze z Bootstrap 4.

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

Stworzyłem to i dodałem do Site.css.

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

Możesz zmienić CSS poprzedniego rozwiązania, jak poniżej:

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

Powinno to również wyśrodkować wszystkie elementy w obiekcie nadrzędnym div.