Question

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

在页面的某个位置，我的节中有3行，其中包含3张图像，在第一行中，图像中也有一个文字“ En savoir plus”：

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

What it looks like without reducing the window

我为该行设置了一个类，将其设置为“图像”，并且文本位于

内，因此我已将此代码放在HTML行内：

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

.image {
position: relative; 
}

如您所见，当页面正常时，文本对齐中心可以很好地工作。

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

After reducing a little the window

当再次减少它时，我的页面如下：

After reducing a lot my window

我想要的是当boxe改变大小时，改变大小并按比例留在同一位置（蓝色事物的中心）的文本。然后，我将其复制到所有框中。

您对如何执行此操作有任何想法吗？

预先感谢您的帮助，我真的很感激，因为我对此很陌生：）

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/

WordPress使框内的字体大小响应

0 个答案: