Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS

Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS đơn giản giúp website của bạn trở nên chuyên nghiệp hơn

Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS
5 (100%) 9 votes
Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS

Khi làm Website về Sản phẩm chúng ta thường gặp trường hợp hình ảnh sản phẩm chỉ căn giữa chiều ngang chứ không căn giữa của cả khung chứa nó. điều này làm cho website thiếu tính thẩm mỹ và chuyên nghiệp hơn
Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS

Bài viết này sẽ giúp bạn căn giữa hình ảnh sản phẩm Woocommerce bằng CSS một cách đơn giản.

Giả sử ta có 1 đoạn html như thế này

 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Vnkings Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS</title>
	<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>

<div class="vnking-image">
		<img src="vnkings.png" alt=""/>
	</div>

</body>
</html>

và CSS

.vnking-image {
    border: 2px solid #ccc;
    box-shadow: 0 0 4px 0 #ccc;
    height: 300px;
    width: 500px;
}
.vnking-image img {
    margin:0 auto;
	max-width:100%;
	display:block;
}

Kết quả :
Căn giữa hình ảnh sản phẩm Woocommerce bằng CSS

Như bạn thấy nó chỉ căn giữa ở chiều ngang, còn chiều dọc thì mặc định luôn ở trên đầu.

Bây giờ trong CSS bạn chỉ cần thay bằng đoạn này :

.vnking-image {
    border: 2px solid #ccc;
    box-shadow: 0 0 4px 0 #ccc;
    height: 300px;
    position: relative;
    width: 500px;
}
.vnking-image img {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

Kết quả :

midle-image-vnkings

Như vậy với 1 đoạn CSS nhỏ các bạn đã giúp sản phẩm của mình luôn căn giữa khung.

Chúc các bạn thành công

Bài liên quan

Bình luận bài viết

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

X

Tạo live chat facebook cho website

Bạn cần tư vấn ?