我有一个图像列表,这些图像在悬停时会在中心显示文字。但是文本左侧有一个偏移量。我不确切知道它创造了什么偏移量。
我可以使用left
和right
将其设置为中心,并将其设置为0,尽管width
将设置为最大100%,这不是我需要的。
为什么要抵消?也有任何属性,如calc
,我可以使用它来获得宽度,只是减去它left:50%
CSS:
ul {width:100%; float:left; margin:0; padding:0; list-style:none;}
.Arrivals {margin-bottom:60px;}
.Arrivals .products .product-category {float:left !important; padding:0 !important; margin:1% !important; position:relative !important; width:23% !important; box-sizing:border-box; display:list-item; clear:none !important;}
.Arrivals .products .product-category:nth-child(3) {float:right !important; width:48% !important;}
.Arrivals .products .product-category a {width:100%; display:block; text-align:center; margin:auto;}
.Arrivals .products .product-category img {margin:0 !important; width:100%; height:auto; display:block; margin:0 0 1em; box-shadow:none;}
.Arrivals .products .product-category h2 { display: none !important; opacity: 0; transition: .3s ease all; -webkit-transition: .3s ease all; -moz-transition: .3s ease all; -o-transition: .3s ease all; float: left; text-align: left !important; position: absolute; top: calc(50% - 22px); padding: 1em 1.75em !important; margin: 0 auto !important; /* opacity: 1; */ text-align: center; display: inline-block !important; background: #fff; color: #000; z-index: 999; font-size: .9em !important; letter-spacing: 1px; font-weight: 500; border-radius: 3px;}
.Arrivals .products .product-category h2 .count {display:none;}
.Arrivals .products .product-category a:after {content:''; background:#000; opacity:.6; width:100%; display:none; height:100%; position:absolute; top:0; border-radius:3px;}
.Arrivals .products .product-category a:hover:after, .Arrivals .products .product-category:hover a:after {display:block; border:1px solid rgba(0, 0, 0, .2); box-shadow: 0 3px 9px rgba(0, 0, 0, .5);}
.Arrivals .products .product-category:hover h2, .Arrivals .products .product-category a:hover h2 {opacity:1; display:inline-block !important;}
HTML:
<div class="Arrivals"><ul class="products">
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg"/> <h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a></li>
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg"/> <h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a></li>
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg"/> <h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a></li>
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg"/> <h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a></li>
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg"/> <h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a></li>
</ul> </div>
答案 0 :(得分:1)
将以下内容添加到代码中将使其水平居中
left: 50%;
transform: translateX(-50%);
ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.Arrivals {
margin-bottom: 60px;
}
.Arrivals .products .product-category {
float: left !important;
padding: 0 !important;
margin: 1% !important;
position: relative !important;
width: 23% !important;
box-sizing: border-box;
display: list-item;
clear: none !important;
}
.Arrivals .products .product-category:nth-child(3) {
float: right !important;
width: 48% !important;
}
.Arrivals .products .product-category a {
width: 100%;
display: block;
text-align: center;
margin: auto;
}
.Arrivals .products .product-category img {
margin: 0 !important;
width: 100%;
height: auto;
display: block;
margin: 0 0 1em;
box-shadow: none;
}
.Arrivals .products .product-category h2 {
display: none !important;
opacity: 0;
transition: .3s ease all;
-webkit-transition: .3s ease all;
-moz-transition: .3s ease all;
-o-transition: .3s ease all;
float: left;
text-align: left !important;
position: absolute;
top: calc(50% - 22px);
padding: 1em 1.75em !important;
margin: 0 auto !important;
/* opacity: 1; */
text-align: center;
display: inline-block !important;
background: #fff;
color: #000;
z-index: 999;
font-size: .9em !important;
letter-spacing: 1px;
font-weight: 500;
border-radius: 3px;
}
.Arrivals .products .product-category h2 .count {
display: none;
}
.Arrivals .products .product-category a:after {
content: '';
background: #000;
opacity: .6;
width: 100%;
display: none;
height: 100%;
position: absolute;
top: 0;
border-radius: 3px;
}
.Arrivals .products .product-category a:hover:after,
.Arrivals .products .product-category:hover a:after {
display: block;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.Arrivals .products .product-category:hover h2,
.Arrivals .products .product-category a:hover h2 {
opacity: 1;
display: inline-block !important;
}
/* additional part */
.woocommerce-loop-category__title {
left: 50%;
transform: translateX(-50%);
}
<div class="Arrivals">
<ul class="products">
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg" />
<h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a>
</li>
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg" />
<h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a>
</li>
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg" />
<h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a>
</li>
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg" />
<h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a>
</li>
<li class="product-category product first">
<a href="#"><img src="https://www.presentationpro.com/images/product/medium/slide/PPP_IFlat_LT3_Flat_Image_Placeholder_01_Circle.jpg" />
<h2 class="woocommerce-loop-category__title">
Watches <mark class="count">(1)</mark> </h2>
</a>
</li>
</ul>
</div>