Question

我有一个响应元素，它的宽度和高度都会缩放。在这里，我有一些文字，我想垂直居中。

如果我不知道父母的身高，如何将文本line-height设置为与父母相同？

line-height: 100%与字体的常规高度有关，因此无效......

Answer 1

这是另一种垂直居中元素的方法。我前段时间遇到this technique。基本上它使用伪元素和vertical-align：middle。

.block::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 2

我会尝试将文本放在另一个元素中，您知道（或设置）其大小。然后设置相对定位，顶部，左侧50％和负左右边距。

See this Fiddle

唯一的问题是这依赖于已知/固定的文本块。如果文本是可变的，我恐怕你不得不求助于使用Javascript ..

Answer 3

关于超链接：

我在主菜单中有关于链接的问题。由于在<a>代码中为<li>，我需要一些表面才能使链接可点击/可点击（请参阅touch target size）。所以我所做的是<ul>我设置了一个固定的高度（在这种情况下是通过它的父级），<li> - s是它的百分比和<a> -s具有最小高度和线高属性设置，从那里设置顶部很容易。代码：

.menu-header-main-container{
position: fixed;
top: 0;
bottom: 160px;
}    
.menu-header-main-container ul.menu {
          height: 100%; }
          .menu-header-main-container ul.menu li {
            height: 33.33%;
            max-height: 110px; }
            .menu-header-main-container ul.menu li a {
              line-height: 40px;
              min-height: 40px;
              top: calc(50% - 20px);
              position: relative; } }

Answer 4

因为已经是2019年了，所以您也可以使用flexbox实现这一点：）

要这样做，请将以下类添加到父元素：

display: flex;
flex-direction: column;
justify-content: center;

查看此Fiddle

Answer 5

仅CSS不能将line-height设置为父元素高度的100％。相反，您可以使用CSS将元素垂直居中。

.parent {
   height:150px;
   position:relative;
   border:1px solid #FDD;
}
.position-center {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

<div class="parent">
  <span class="position-center">I am vertically centered element</span>
</div>

将行高设置为相对于父元素的百分比

5 个答案: