如何在多个div中垂直居中放置文本

法兰基

在过去的几个小时中,我一直在努力从左栏切换到右栏。我的意思是,我正在尝试将文本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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在多个div中垂直居中放置文本

来自分类Dev

如何在div中居中放置垂直文本?

来自分类Dev

在div中垂直居中放置文本

来自分类Dev

在div中垂直居中放置文本

来自分类Dev

如何使用CSS在DIV中垂直居中放置文本?

来自分类Dev

如何在导航栏中垂直居中放置文本?

来自分类Dev

如何在DIV中垂直和水平居中放置文本

来自分类Dev

如何在具有动态变化高度的div中垂直居中放置文本?

来自分类Dev

使用CSS在div中垂直居中放置文本

来自分类Dev

如何在响应图像上垂直居中放置文本?

来自分类Dev

如何在标题中垂直居中放置文本?

来自分类Dev

如何在画布上垂直居中放置文本

来自分类Dev

将多个div垂直居中放置

来自分类Dev

如何在div内垂直居中放置按钮和文本

来自分类Dev

如何使用css在圆形div中垂直居中放置文本

来自分类Dev

如何在Bootstrap的navbar品牌类中垂直居中放置文本?

来自分类Dev

如何在具有(流体高度)的响应框中垂直居中放置文本

来自分类Dev

如何在flexbox中垂直居中放置文本,并使图像固定在底部?

来自分类Dev

如何在网格中垂直居中放置所有文本?

来自分类Dev

如何在flutter中水平和垂直居中放置文本字段

来自分类Dev

如何在SPAN中垂直居中放置图像

来自分类Dev

如何在Bootstrap 3中垂直居中放置文字?

来自分类Dev

在div中垂直居中放置图像

来自分类Dev

在div中垂直居中放置内容

来自分类Dev

在div中垂直居中放置图像

来自分类Dev

在DIV中垂直居中放置文字

来自分类Dev

如何在div元素内居中放置文本?

来自分类Dev

如何使用CSS在DIV中居中放置文本

来自分类Dev

如何在太小的容器中居中放置文本?

Related 相关文章

热门标签

归档