Я роблю каталог за допомогою Bootstrap 3. Коли відображаються на планшетах, зображення виробів виглядають некрасиво через їх невеликий розмір (500x500) та ширину 767 пікселів у браузері. Я хочу поставити зображення в центр екрану, але я чомусь не можу. Хто буде допомагати вирішити проблему?
Відповіді:
Якщо ви використовуєте Bootstrap v3.0.1 або новішої, вам слід скористатися цим рішенням . Він не перекриває стилі Bootstrap зі спеціальним CSS, а натомість використовує функцію Bootstrap.
Моя оригінальна відповідь наведена нижче для нащадків
Це приємно просте виправлення. Оскільки .img-responsiveз програми Bootstrap вже встановлено display: block, ви можете використовувати margin: 0 autoдля центрування зображення:
.product .img-responsive {
margin: 0 auto;
}
margin: 0 auto, а не змінювати .img-чуйний.
У .center-blockTwitter Bootstrap 3 є клас ( оскільки v3.0.1 ), тому використовуйте:
<img src="..." alt="..." class="img-responsive center-block" />class="img-responsive" style="margin: 0 auto;"працює для мене class="img-responsive center-block"не (bootstrap 3, але версія кілька місяців)
<a href="#"> </a>пари, область, яку можна натиснути, розшириться на повну ширину контейнера, що додається, що може бути трохи більше, ніж ваше зображення. Це може заплутати користувачів, які натискають на те, що, на їхню думку, є «порожнім» простором.
Додайте до класу лише клас center-block, це працює і з Bootstrap 4:
<img src="..." alt="..." class="center-block" />Примітка: center-blockпрацює навіть при img-responsiveвикористанні
Просто використовуйте .text-centerклас, якщо ви використовуєте Bootstrap 3.
<div class="text-center">
<img src="..." alt="..."/>
</div>
Примітка. Це не працює з реагуванням на img-response
img-responsive
img-responsiveЗ цим класом стилю можна працювати, не впливаючи на інші зображення.
Ви можете передувати цьому тегу за допомогою розділу id / div id / class, щоб визначити порядок, в якому це imgвкладено. Цей звичай img-responsiveпрацює лише в цій області.
Припустимо, у вас HTML-область визначена як:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>Тоді ваш CSS може бути:
section#work .img-responsive{
margin: 0 auto;
}Примітка. Ця відповідь відповідає потенційному впливу зміни img-responsiveв цілому. Звичайно, center-blockце найпростіше рішення.
Спробуйте цей код, він буде працювати і для невеликих піктограм із завантажувальним пристроєм 4, оскільки не існує класу центрального блоку - завантажувальний 4, тому спробуйте цей метод буде корисним. Ви можете змінити положення зображення, встановивши .col-md-12на .col-md-8або .col-md-4, це до вас.
<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>Спробуйте це:
.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>Просто помістіть усі мініатюри зображень всередину рядків / рядків типу:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>і все буде добре працювати!
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>Ви можете виправити це, визначаючи маржу: 0 авто
або ви можете також використовувати 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>Більш точним способом, застосованим до всіх об'єктів Booostrap, використовуючи лише стандартні класи, було б не встановлювати верхній і нижній поля (оскільки зображення може успадковувати їх від батьківського), тому я завжди використовую:
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}Я також створив для цього історію, тож якщо якісь зміни будуть застосовані через помилки, оновлена версія завжди буде тут: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
На сьогодні найкраще рішення прийняти <img class="center-block" ... />. Але ніхто не згадав, як це center-blockпрацює.
Візьмемо для прикладу Bootstrap v3.3.6:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}Значенням за замовчуванням dispalyдля <img>є inline. Значення blockвідображатиме елемент як елемент блоку (як <p>). Він починається з нового рядка і займає всю ширину. Таким чином, два налаштування поля дозволяють зображенню залишатися посередині горизонтально.
:)