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

前端之家收集整理的这篇文章主要介绍了html – 内联块div内的垂直对齐跨度文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在建立一个平面设计的网站.我有一个标题,下面有两个不同颜色的块,彼此相邻.我尝试左右浮动,但建议使用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.

原文链接:https://www.f2er.com/html/226112.html

猜你在找的HTML相关文章