Как изменить положение текста, который появляется при наведении на верх изображения

Question

Я новичок в CSS и разработке веб-сайтов и довольно часто застрял на форматировании. Я использую готовую тему и настраиваю ее в соответствии с требованиями моего клиента, и я не могу изменить положение текста, который появляется при наведении на изображение.

введите описание изображения здесь

Я добавил половину HTML-кода. Может ли кто-нибудь помочь мне с этим

Я пытался использовать float: center, align-text: center в 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

Вы можете сделать это так:

.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 2

Вы можете использовать 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;
}

Answer 3

я нашел твик, необходимый для вашего 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;
}