如何更改悬停在图像顶部时出现的文本的位置

Question

我是 CSS 和网站开发的新手，经常在格式化方面遇到困难。我使用的是预建主题并对其进行自定义以满足我客户的要求，但我无法更改鼠标悬停在图片上时出现的文本位置。

enter image description here

我添加了一半 html 代码。谁能帮我解决这个问题

我尝试使用 float:center, align-text: center in css 但没有任何效果

.home-category .block-center .inner-top a{
    float:center;/* changed left*/
    left:9px;
  }
.home-category .block-center .inner-top a.frist{
    margin-right:28px;
}
.home-category .block-center .inner-bottom{
    margin-top: 14px;
    float:center;/* changed left*/
}
.home-category .block-right .inner-bottom{
    margin-top: 14px;
}
.home-category .info{
    position:absolute;
    top:50%;
    left:50%; /*removed */
    margin-top:-13px;
}
.home-category .info a{
    color:#fff;
    font-size:0;
    float:center;
    text-transform:uppercase;
    position:relative;
    font-weight:bold;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    white-space:nowrap;
}
.home-category .info a:before{
    float:center;
    content: "";
    height: 0px;
    opacity: 0;
    position: absolute;
    left:50%;
    top: 50%;
    transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    visibility: hidden;
    width: 0px;
}
/*hover block left*/
.home-category .block-left:hover .info a{

    font-size:128.57%;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    margin-left:-25px;
    margin-top:-13px; 
}
.home-category .block-left:hover .image:before{
    transform: scale(1);
    visibility:visible;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    opacity:1;
}
.home-category .info a:hover{
    color:#25bce9
}
.home-category .block-left:hover .info a:before{
    transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    height:150px;
    width:150px;
    visibility:visible;
    opacity:1;
    margin-top:-75px;
    margin-left:-75px;
}

<section class="home-category">
            <div class="container">
                <div class="row"> 
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 block block-left">
                        <a href="#" class="image">
                            <img src="images/banner/category/1.png" alt=" Vector vector created by freepik - www.freepik.com"/>
                        </a>
                        <div class="info">
                            <a href="wide_format_print.html" style="justify">Wide Format<br>Printing</a>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 block block-center">
                        <div class="inner-top">
                            <div class="box-left">
                                <a href="#" class="image frist">
                                    <img src="images/banner/category/2.jpg" alt="<Brochure psd created by freepik - www.freepik.com"/>
                                </a>
                                <div class="info">
                                    <a href="promotion-material.html" style="center">Promotional Material</a>
                                </div>
                            </div>

Answer 1

我发现您在此处发布的 css 文件需要进行一些调整，尝试进行以下更改

.home-category .info{
    position:absolute;
    top:50%;
    width:100%;
    left:0;       
  }



.home-category .info a{
    color:#fff;
    text-align:center
    text-transform:uppercase;  
    font-weight:bold;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    white-space:nowrap;
}

Answer 2

你可以这样做:

.image {
  display: inline-block;
  position: relative;
  padding: 5px;
  line-height: 0;
}

.image span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  display: none;
  font-size: 20px;
}

.image:hover span {
  display: inline-block;
}

<div class="container">
<div class="image"><img src="https://via.placeholder.com/250x150" /> <span>Some text</span></div>
<div class="image"><img src="https://via.placeholder.com/125x150" /> <span>Some text</span></div>
<div class="image"><img src="https://via.placeholder.com/175x150" /> <span>Some text</span></div>
<div class="image"><img src="https://via.placeholder.com/400x150" /> <span>Some text</span></div>
<div class="image"><img src="https://via.placeholder.com/175x150" /> <span>Some text</span></div>
</div>

首先，您需要设置line-height: 0以防止垂直间隙。

使用position: absolute并设置top: 50%垂直居中。

接下来，使用width: 100%和text-align: center进行水平居中。

Answer 3

您可以使用 display: flex; 将 div 从顶部和左侧居中。使用下面 CSS：

.home-category .info{
    position:absolute;
    top:0%;
    left:0%; 
    margin-top:0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

如何更改悬停在图像顶部时出现的文本的位置

How to change the position of text that appears on hovering on the top of images

html

css

text-styling