html - Wordpress 使框内的字体大小响应

Question

我现在正在研究一个 wordpress 主题，我想知道如何调整框内文本的字体大小，使其始终保持在中间。

在我的页面中，我在一个部分中有 3 行，有 3 张图像，在第一行中，我还有一个文字，上面写着“En savoir plus”，位于图像内：

我的 wordpress 部分和行

该部分及其行是响应式的。

不减窗的样子

我有一个设置为“图像”的行的类，文本在里面

所以我把这段代码放在了一个 HTML 行中：

.image p {
position: absolute; 
top: 86%;
width:100%;
color:white;
margin: auto;
text-align: center;
}

.image {
position: relative; 
}

如您所见，当页面正常时，文本对齐中心可以完美运行。

但是当你减少它时，我的页面看起来像这样：

缩小一点窗口后

当你再次减少它时，我的页面看起来像这样：

在减少了很多我的窗户之后

我想要的是文本改变大小并在盒子改变大小时按比例保持在同一位置（蓝色事物的中心）。然后我会将它复制到所有盒子。

你有什么想法如何做到这一点？

在此先感谢您的帮助，我真的很感激，因为我对此很陌生:)

PS：我不知道它是否有帮助，但我正在使用 POFO 模板。

有一个美好的一天！

编辑：我页面的所有代码：

  <style>
.bordure {
   border-bottom: 1px solid black !important;
}

.sub-menu > li > a {
   color: blue !important;
}

nav.navbar.bootsnav .simple-dropdown .dropdown-menu > li {
background-color: white !important;
}

.simple-dropdown .dropdown-menu {
background: white !important;
}

a {
color:#71c9dd;
}

header.sticky nav.navbar-default, header.sticky nav.navbar.bootsnav { 
background-color: transparent !important;
}

.pofo-footer-bottom {
display:none;
}

.texte_cabot {
z-index: 700;
position: absolute;
top: 550px;
left: 1600px;
font-size: 40pt;
}

header nav.navbar-default, nav.navbar.bootsnav, .full-width-pull-menu {
background-image: url('http://newstart.visceral.fr/wp-content/uploads/2018/12/bg_header.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent !important;
position: fixed;
top: 0;
left: 0;
}

header nav .nav-header-container {
padding-bottom: 163px !important;
padding-left: 0 !important;
}

.box-layout {
    margin-top:-55px;
}

a:hover {
color:black;
}

body {
margin-bottom: 0;
padding-bottom: 0;
}

.image p {
position: absolute; 
top: 86%;
width:100%;
color:white;
margin: auto;
text-align: center;
}

.image {
position: relative; 
}

@media screen and (max-width: 778)
header nav.navbar-default, nav.navbar.bootsnav, .full-width-pull-menu  {
background: url('http://newstart.visceral.fr/wp-content/uploads/2018/12/small_bg_header.png') repeat-x !important;
background-size: cover !important;
padding-bottom: 0 !important;
}

</style>

编辑：整个页面 HTML ：（包括 POFO 样式表（很长，抱歉））：

尝试导入，但发布时间过长。超过的字符数。您能否点击查看代码源来检查它？： http: //newstart.visceral.fr/fluimucil/

标签： htmlcsswordpress