在过去的几个小时中,我一直在努力从左栏切换到右栏。我的意思是,我正在尝试将文本div垂直居中在灰色div中。
我很想得到您的帮助。我已经阅读了很多教程和论坛答案,但尚未得到预期的结果。
任何建议都值得欢迎:)
HTML代码:
.box-key-message{
height: 240px;
position: relative;
background-color: #eeeeee;
border-radius: 10px;
}
.box-key-message div {
display:inline-block;
vertical-align:middle;
padding: 20px;
text-align: justify;
}
.box-key-message span {
font-weight:bold;
font-size:16px;
color: #D5420F;
}
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<span> Gratuit</span>
<br /><br />
Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.
<br /><br />
Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Simple et Rapide</span>
<br /><br />
Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.
<br /><br />
Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Sans engagement</span>
<br /><br />
Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.
<br /><br />
Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Et pour payer l’étudiant ?</span>
<br /><br />
L’étudiant vous facturera la prestation en direct à la fin de la mission.
</div>
</div>
</div>
仅display: table; table-layout: fixed;
用于父div和display: table-cell; vertical-align: middle;
每个孩子。请在下面查看其工作方式。您可能还需要同时指定width: 100%
两者。
.box-key-message{
height: 240px;
position: relative;
background-color: #eeeeee;
border-radius: 10px;
display: table;
table-layout: fixed;
}
.box-key-message div {
display:inline-block;
vertical-align:middle;
padding: 20px;
text-align: justify;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.box-key-message span {
font-weight:bold;
font-size:16px;
color: #D5420F;
}
<div class="col-lg-4 col-lg-offset-1">
<div class="box-key-message">
<div>
<span> Gratuit</span>
<br /><br />
Notre service, qui vous permet d’accéder à des centaines d’étudiants, est complètement gratuit pour vous.
<br /><br />
Vous ne rémunérez que l’étudiant. Un acompte de 15% vous sera demandé au moment de la mise en relation. Le reste sera payé une fois tous les succès de votre mission atteints !
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Simple et Rapide</span>
<br /><br />
Remplissez cette page en 5 minutes pour publier une mission à tous nos étudiants.
<br /><br />
Vous recevrez alors le CV des étudiants intéressés par votre mission. Une fois l’étudiant sélectionné, la mission commence.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Sans engagement</span>
<br /><br />
Les étudiants des Grandes Ecoles qui vous répondent sont qualifiés, motivés, disponibles et réactifs.
<br /><br />
Si malgré tout aucun profil ne vous correspond, vous n’avez aucune obligation de recruter un étudiant et poster la mission aura été gratuit.
</div>
</div>
<br /><br />
<div class="box-key-message">
<div>
<span>Et pour payer l’étudiant ?</span>
<br /><br />
L’étudiant vous facturera la prestation en direct à la fin de la mission.
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句