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

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

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

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

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ình luận bài viết

Tìm kiếm

Thiết kế Website

VnFaster Fanpage

Bài xem nhiều

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