Tôi thực hiện một danh mục bằng Bootstrap 3. Khi được hiển thị trên máy tính bảng, hình ảnh sản phẩm trông xấu xí vì kích thước nhỏ (500x500) và chiều rộng 767 pixel trong trình duyệt. Tôi muốn đặt hình ảnh ở giữa màn hình, nhưng vì một số lý do tôi không thể. Ai sẽ giúp giải quyết vấn đề?
Câu trả lời:
Nếu bạn đang sử dụng Bootstrap v3.0.1 trở lên, bạn nên sử dụng giải pháp này thay thế. Nó không ghi đè các kiểu của Bootstrap bằng CSS tùy chỉnh, mà thay vào đó sử dụng tính năng Bootstrap.
Câu trả lời ban đầu của tôi được hiển thị dưới đây cho hậu thế
Đây là một sửa chữa dễ dàng dễ chịu. Bởi vì .img-responsivetừ Bootstrap đã được đặt display: block, bạn có thể sử dụng margin: 0 autođể căn giữa hình ảnh:
.product .img-responsive {
margin: 0 auto;
}margin: 0 auto, thay vì thay đổi .img-responsive.
Có .center-blocklớp trong Twitter Bootstrap 3 ( Kể từ phiên bản 3.0 ), vì vậy hãy sử dụng:
<img src="..." alt="..." class="img-responsive center-block" />class="img-responsive" style="margin: 0 auto;"hoạt động với tôi class="img-responsive center-block"không (bootstrap 3, nhưng phiên bản vài tháng tuổi)
<a href="#"> </a>cặp, khu vực có thể nhấp sẽ được mở rộng đến toàn bộ chiều rộng của thùng chứa kèm theo có thể lớn hơn một chút so với hình ảnh của bạn. Điều này có thể gây nhầm lẫn cho người dùng nhấp vào không gian "trống".
Chỉ thêm lớp center-blockvào một hình ảnh, điều này cũng hoạt động với Bootstrap 4:
<img src="..." alt="..." class="center-block" />Lưu ý: center-blockhoạt động ngay cả khi img-responsiveđược sử dụng
Chỉ cần sử dụng .text-centerlớp nếu bạn đang sử dụng Bootstrap 3.
<div class="text-center">
<img src="..." alt="..."/>
</div>Lưu ý: Điều này không hoạt động với img-responsive
img-responsive
Bạn vẫn có thể làm việc img-responsivemà không ảnh hưởng đến các hình ảnh khác với lớp phong cách này.
Bạn có thể đặt trước thẻ này với phần id / div id / class để xác định một thứ tự trong đó cái này imgđược lồng vào nhau. Tùy chỉnh img-responsivenày sẽ chỉ hoạt động trong khu vực đó.
Giả sử bạn có một khu vực HTML được xác định là:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>Sau đó, CSS của bạn có thể là:
section#work .img-responsive{
margin: 0 auto;
}Lưu ý: Câu trả lời này liên quan đến tác động tiềm tàng của việc thay đổi img-responsivenói chung. Tất nhiên, center-blocklà giải pháp đơn giản nhất.
Hãy thử mã này, nó cũng sẽ hoạt động với các biểu tượng nhỏ với bootstrap 4 vì không có lớp khối trung tâm nào là bootstrap 4, vì vậy hãy thử phương pháp này sẽ rất hữu ích. Bạn có thể thay đổi vị trí của hình ảnh bằng cách đặt .col-md-12thành .col-md-8hoặc .col-md-4, tùy thuộc vào bạn.
<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>Thử cái này:
.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>Chỉ cần đặt tất cả các hình thu nhỏ của hình ảnh trong một hàng div / col như thế này:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>và mọi thứ sẽ hoạt động tốt!
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>Bạn có thể sửa nó bằng cách xác định lề: 0 tự động
hoặc bạn cũng có thể sử dụng 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>Cách chính xác hơn được áp dụng cho tất cả các đối tượng Booostrap chỉ sử dụng các lớp tiêu chuẩn là không đặt lề trên và dưới (vì hình ảnh có thể thừa hưởng những thứ này từ cha mẹ), vì vậy tôi luôn sử dụng:
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}Tôi cũng đã tạo Gist cho điều đó, vì vậy nếu có bất kỳ thay đổi nào được áp dụng do có bất kỳ lỗi nào, phiên bản cập nhật sẽ luôn ở đây: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
Cho đến nay, giải pháp tốt nhất để chấp nhận dường như là <img class="center-block" ... />. Nhưng không ai đề cập đến cách làm center-blockviệc.
Lấy Bootstrap v3.3.6 làm ví dụ:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}Giá trị mặc định của dispalycho <img>là inline. Giá trị blocksẽ hiển thị một phần tử dưới dạng phần tử khối (như <p>). Nó bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng. Theo cách này, hai cài đặt lề cho phép hình ảnh ở giữa theo chiều ngang.
:)