html – 内联块div内的垂直对齐跨度文本

发布时间：2020-12-14 18:31:50 所属栏目：资源来源：网络整理

导读：我正在建立一个平面设计的网站.我有一个标题,下面有两个不同颜色的块,彼此相邻.我尝试左右浮动,但建议使用display：inline-block代替. 不过,我遇到了一个问题.我想在左侧和右侧块的中间放置一些文本,并尝试使用align-items：center,但想通了只有在div设置为f

我正在建立一个平面设计的网站.我有一个标题,下面有两个不同颜色的块,彼此相邻.我尝试左右浮动,但建议使用display：inline-block代替.

不过,我遇到了一个问题.我想在左侧和右侧块的中间放置一些文本,并尝试使用align-items：center,但想通了只有在div设置为flex时才有效.

所以我的问题是,我可以以某种方式保持我的内联块并让我的文本居中在块的中间(水平和垂直)？

body {
      margin: 80px 0 0;
    }
    #pagewrapper {
      width: 100%;
    }
    #header {
      width: 100%;
      height: 80px;
      background-color: #008B8B;
      position: fixed;
      top: 0;
    }
    .content-left,.content-right {
      width: 50%;
      height: 500px;
      color: #FFFFFF;
      display: -moz-inline-stack;
      display: inline-block;
      zoom: 1;
      *display: inline;
    }
    .content-left {
      background-color: #66CC99;
    }
    .content-right {
      background-color: #20B2AA;
    }
    #header-bot {
      height: 800px;
      background-color: #F8F8FF;
    }
    #footer {
      height: 50px;
      background-color: #AFEEEE;
    }
    .title {
      font-size: 18px;
    }

<body>
  <div id="pagewrapper">
    <div id="header">
    </div>
    <!-- End of Header -->
    <div class="content-left">
      <span class="title">This is left Content</span>
    </div>
    <!-- End of Content Left -->
    <div class="content-right">
      <span class="title">This is Right Content</span>
    </div>
    <!-- End of Content Right -->
    <div id="header-bot">
    </div>
    <!-- End of Header-Bot -->
    <div id="footer">
    </div>
    <!-- End of Footer -->
  </div>
  <!-- End of PageWrapper -->

</body>

解决方法

将列的显示类型更改为表格单元格可能会导致问题(例如,对于表格单元格元素,相对定位的效果未定义)另一种选择是在列中添加全高(伪)元素并将其与<跨度>通过vertical-align：middle垂直元素;宣言：

EXAMPLE HERE

.content-left,.content-right { text-align: center; } /* Align inline children horizontally */

.content-left:after,.content-right:after {
    content: "";
    display: inline-block;
    vertical-align: middle;  /* Align inline level elements vertically */
    height: 100%;
} 

.title {
    vertical-align: middle;  /* Align inline level elements vertically */
}

有关详细信息,请参阅此处的my answer.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!