54

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

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

line-height: 100%是相对于字体的常规高度，所以这无济于事......

4

5 回答 5

89

这是垂直居中元素的另一种方法。前段时间我遇到了这种技术。基本上它使用伪元素和垂直对齐：中间。

.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;
}
于 2012-10-02T08:00:42.250 回答
15

Since it's 2019 already, you could also use flexbox to achieve this :)

To do so, add the following classes to the parent element:

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

See this Fiddle

于 2019-03-06T12:04:21.450 回答
1

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

看到这个小提琴

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

于 2012-10-02T07:37:08.710 回答
1

关于超链接：

关于主菜单中的链接，我遇到了这个问题。而且由于它<a>在<li>标签中，我需要一些表面来使链接可点击/可触摸（请参阅触摸目标大小）。所以我所做的是<ul>我设置了一个固定的高度（在这种情况下通过它的父级），- <li>s 是它的百分比，<a>-s 有一个 min-height 和 line-height 属性设置，很容易从在那里设置顶部。编码：

.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; } }
于 2018-01-25T13:18:19.173 回答
0

您不能仅使用 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>

于 2020-09-03T07:32:12.720 回答