当我在悬停框中输入小一行内容时，如何使图标垂直居中？可能与否？
How to icon vertically center when i enter small one line content in hover box? it is possible or not?
你好，我尝试在 hover 上设置 icon 但是当框内容在同一行时工作正常但是当我输入 小内容一行 在任何框中比 图标不垂直 中心我也有附件是什么问题和我想要的。我设置了相对位置和顶部百分比，请提供任何解决方案。内容是 none 框悬停块。 提前致谢。
同行代码 :
输入小一行内容时：
section { padding: 100px 0; }
img { max-width: 100%; }
* { box-sizing: border-box; }
figure {
position: relative;
}
.blog-hover-icon {
-webkit-transition: 0.3s;
transition: 0.3s;
position: absolute;
height: 100%;
width: 100%;
background: rgba(37, 37, 37, 0.5);
top: 0;
left: 0;
text-align: center;
z-index: 1;
visibility: hidden;
opacity: 0;
}
.box .blog-hover-icon {
visibility: visible;
opacity: 1;
}
.box .blog-hover-icon span {
font-size: 30px;
line-height: 30px;
color: #fff;
position: relative;
top: 12%;
}
.box .post-content {
position: absolute;
bottom: 0;
left: 0;
padding: 30px;
background-color: #252525;
z-index: 2;
color: #fff;
}
.box .post-content a {
color: #5971ff;
}
.box .post-content a:hover {
text-decoration: none;
}
.box .post-content p {
display: none;
}
.box:hover .post-content p {
display: block;
}
.box .post-content .author {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container">
<div class="row h-100">
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1000/1000" alt="test">
</a>
<div class="blog-hover-icon"><span>+</span></div>
</div>
<figcaption>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1000/1000" alt="test">
</a>
<div class="blog-hover-icon"><span>+</span></div>
</div>
<figcaption>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text</p>
<div class="author">
<span class="text-uppercase">25 jun / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1000/1000" alt="test">
</a>
<div class="blog-hover-icon"><span>+</span></div>
</div>
<figcaption>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">05 dec / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
使用这个：
.box .blog-hover-icon span {
font-size: 30px;
line-height: 30px;
color: #fff;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
left: 0;
right: 0;
margin: 0 auto;
}
这也适用于相对位置
将高度添加到 <p> 标签以在框悬停时正确显示。
.box .post-content p {
display: none;
height: 80px;
max-height: 100%;
}
使用flexbox，在parent中如下CSS
.container{
display:flex;
align-items:center;
height:100vh;
jsutify-content:center;
}
请按照以下更改您的 html 和 css 代码并更新它。
section { padding: 100px 0; }
img { max-width: 100%; }
* { box-sizing: border-box; }
figure {
position: relative;
}
figure figcaption {
position: absolute;
bottom: 0;
top: 0;
height: 100%;
width: 100%;
-ms-flex-direction: column;
-webkit-box-orient: vertican;
-webkit-box-direction: norman;
flex-direction: column;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.blog-hover-icon {
-webkit-transition: 0.3s;
transition: 0.3s;
z-index: 1;
visibility: hidden;
opacity: 0;
}
.box:hover .blog-hover-icon {
visibility: visible;
opacity: 1;
}
.box .blog-hover-icon span {
font-size: 30px;
line-height: 30px;
color: #fff;
position: relative;
top: 12%;
}
.box .post-content {
padding: 30px 40px;
background-color: #252525;
z-index: 2;
-webkit-transition: 0.3s;
transition: 0.3s;
color: #fff;
}
.box .post-content a {
color: #5971ff;
}
.box .post-content a:hover {
text-decoration: none;
}
.box .post-content p {
display: none;
}
.box:hover .post-content p {
display: block;
}
.box .post-content .author {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container">
<div class="row h-100">
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1200/1200" alt="test">
</a>
</div>
<figcaption>
<div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1200/1200" alt="test">
</a>
</div>
<figcaption>
<div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1200/1200" alt="test">
</a>
</div>
<figcaption>
<div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design.</a></div>
<p>Lorem Ipsum is simply.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
你好，我尝试在 hover 上设置 icon 但是当框内容在同一行时工作正常但是当我输入 小内容一行 在任何框中比 图标不垂直 中心我也有附件是什么问题和我想要的。我设置了相对位置和顶部百分比，请提供任何解决方案。内容是 none 框悬停块。 提前致谢。
同行代码 :
输入小一行内容时：
section { padding: 100px 0; }
img { max-width: 100%; }
* { box-sizing: border-box; }
figure {
position: relative;
}
.blog-hover-icon {
-webkit-transition: 0.3s;
transition: 0.3s;
position: absolute;
height: 100%;
width: 100%;
background: rgba(37, 37, 37, 0.5);
top: 0;
left: 0;
text-align: center;
z-index: 1;
visibility: hidden;
opacity: 0;
}
.box .blog-hover-icon {
visibility: visible;
opacity: 1;
}
.box .blog-hover-icon span {
font-size: 30px;
line-height: 30px;
color: #fff;
position: relative;
top: 12%;
}
.box .post-content {
position: absolute;
bottom: 0;
left: 0;
padding: 30px;
background-color: #252525;
z-index: 2;
color: #fff;
}
.box .post-content a {
color: #5971ff;
}
.box .post-content a:hover {
text-decoration: none;
}
.box .post-content p {
display: none;
}
.box:hover .post-content p {
display: block;
}
.box .post-content .author {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container">
<div class="row h-100">
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1000/1000" alt="test">
</a>
<div class="blog-hover-icon"><span>+</span></div>
</div>
<figcaption>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1000/1000" alt="test">
</a>
<div class="blog-hover-icon"><span>+</span></div>
</div>
<figcaption>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text</p>
<div class="author">
<span class="text-uppercase">25 jun / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1000/1000" alt="test">
</a>
<div class="blog-hover-icon"><span>+</span></div>
</div>
<figcaption>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">05 dec / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
使用这个：
.box .blog-hover-icon span {
font-size: 30px;
line-height: 30px;
color: #fff;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
left: 0;
right: 0;
margin: 0 auto;
}
这也适用于相对位置
将高度添加到 <p> 标签以在框悬停时正确显示。
.box .post-content p {
display: none;
height: 80px;
max-height: 100%;
}
使用flexbox，在parent中如下CSS
.container{
display:flex;
align-items:center;
height:100vh;
jsutify-content:center;
}
请按照以下更改您的 html 和 css 代码并更新它。
section { padding: 100px 0; }
img { max-width: 100%; }
* { box-sizing: border-box; }
figure {
position: relative;
}
figure figcaption {
position: absolute;
bottom: 0;
top: 0;
height: 100%;
width: 100%;
-ms-flex-direction: column;
-webkit-box-orient: vertican;
-webkit-box-direction: norman;
flex-direction: column;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.blog-hover-icon {
-webkit-transition: 0.3s;
transition: 0.3s;
z-index: 1;
visibility: hidden;
opacity: 0;
}
.box:hover .blog-hover-icon {
visibility: visible;
opacity: 1;
}
.box .blog-hover-icon span {
font-size: 30px;
line-height: 30px;
color: #fff;
position: relative;
top: 12%;
}
.box .post-content {
padding: 30px 40px;
background-color: #252525;
z-index: 2;
-webkit-transition: 0.3s;
transition: 0.3s;
color: #fff;
}
.box .post-content a {
color: #5971ff;
}
.box .post-content a:hover {
text-decoration: none;
}
.box .post-content p {
display: none;
}
.box:hover .post-content p {
display: block;
}
.box .post-content .author {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container">
<div class="row h-100">
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1200/1200" alt="test">
</a>
</div>
<figcaption>
<div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1200/1200" alt="test">
</a>
</div>
<figcaption>
<div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design, and my designs come from nature.</a></div>
<p>Lorem Ipsum is simply text of the a printing setting industry Ipsum has been standard.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-4 box">
<figure>
<div class="blog-image position-relative">
<a href="#">
<img src="http://placekitten.com/1200/1200" alt="test">
</a>
</div>
<figcaption>
<div class="my-auto w-100 text-center blog-hover-icon"><span>+</span></div>
<div class="post-content text-center">
<div class="card-title"><a href="#">Leopard is an animal design.</a></div>
<p>Lorem Ipsum is simply.</p>
<div class="author">
<span class="text-uppercase">30 jul / by <a href="#">Lorem Ipsum</a></span>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>