Robię katalog przy użyciu Bootstrap 3. Obrazy wyświetlane na tabletach wyglądają brzydko ze względu na ich mały rozmiar (500 x 500) i szerokość 767 pikseli w przeglądarce. Chcę umieścić obraz na środku ekranu, ale z jakiegoś powodu nie mogę. Kto pomoże rozwiązać problem?
Odpowiedzi:
Jeśli używasz Bootstrap w wersji 3.0.1 lub nowszej, powinieneś użyć tego rozwiązania . Nie zastępuje stylów Bootstrap niestandardowym CSS, ale zamiast tego używa funkcji Bootstrap.
Moja oryginalna odpowiedź jest pokazana poniżej dla potomności
Jest to przyjemnie łatwa naprawa. Ponieważ .img-responsivez Bootstrap już ustawiono display: block, możesz użyć margin: 0 autodo wyśrodkowania obrazu:
.product .img-responsive {
margin: 0 auto;
}
margin: 0 auto, zamiast zmieniać responsywną .img.
W .center-blockTwitter Bootstrap 3 jest klasa ( od wersji 3.0.1 ), więc użyj:
<img src="..." alt="..." class="img-responsive center-block" />class="img-responsive" style="margin: 0 auto;"działa dla mnie class="img-responsive center-block"nie (bootstrap 3, ale wersja kilka miesięcy)
<a href="#"> </a>parę, klikalny obszar zostanie rozszerzony do pełnej szerokości otaczającego pojemnika, który może być nieco większy niż obraz. Może to dezorientować użytkowników, którzy klikną na „puste” miejsce, które ich zdaniem.
Dodaj tylko klasę center-blockdo obrazu, działa to również z Bootstrap 4:
<img src="..." alt="..." class="center-block" />Uwaga: center-blockdziała nawet wtedy, gdy img-responsivejest używany
Po prostu użyj .text-centerklasy, jeśli używasz Bootstrap 3.
<div class="text-center">
<img src="..." alt="..."/>
</div>
Uwaga: To nie działa w przypadku reagowania na img
img-responsive
W img-responsivetej klasie stylów możesz nadal pracować bez wpływu na inne obrazy.
Możesz poprzedzić ten tag sekcją id / div id / class, aby zdefiniować kolejność, w której imgjest on zagnieżdżony. Ten zwyczaj img-responsivebędzie działał tylko w tym obszarze.
Załóżmy, że masz obszar HTML zdefiniowany jako:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>Następnie twój CSS może być:
section#work .img-responsive{
margin: 0 auto;
}Uwaga: Ta odpowiedź dotyczy potencjalnego wpływu zmian img-responsivejako całości. Oczywiście center-blockjest najprostszym rozwiązaniem.
Wypróbuj ten kod, będzie działał również w przypadku małych ikon z bootstrap 4, ponieważ nie ma klasy bloku centralnego to bootstrap 4, więc wypróbuj tę metodę, która będzie pomocna. Można zmienić położenie obrazu poprzez ustawienie .col-md-12się .col-md-8lub .col-md-4, to zapisu do Ciebie.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-xs-center text-lg-center">
<img src="" class="img-thumbnail">
</div>
</div>
</div>
</div>Spróbuj tego:
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
.Image{
background:#ccc;
padding:30px;
}<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>Po prostu umieść wszystkie miniatury obrazów w wierszach / kolumnach w następujący sposób:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>i wszystko będzie dobrze działać!
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>Możesz to naprawić definiując margines: 0 auto
lub możesz użyć również col-md-offset
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>
<div class="container">
<h2>Image</h2>
<div class="row">
<div class="col-md-12">
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</div>
</div>
</body>
</html>Bardziej dokładnym sposobem zastosowanym do wszystkich obiektów Booostrap przy użyciu tylko klas standardowych byłoby nie ustawianie marginesów górnego i dolnego (ponieważ obraz może dziedziczyć je od rodzica), więc zawsze używam:
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}Zrobiłem też Gist dla tego, więc jeśli jakieś zmiany będą miały zastosowanie z powodu jakichkolwiek błędów, wersja aktualizacji będzie zawsze tutaj: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
Jak dotąd wydaje się, że najlepszym rozwiązaniem jest akceptacja <img class="center-block" ... />. Ale nikt nie wspominał, jak to center-blockdziała.
Weźmy na przykład Bootstrap v3.3.6:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}Wartość domyślna dispalydla <img>to inline. Wartość blockwyświetli element jako element blokowy (jak <p>). Zaczyna się od nowej linii i zajmuje całą szerokość. W ten sposób dwa ustawienia marginesów pozwalają obrazowi pozostać w środku poziomo.
:)