blocks|key|4779731|text|这是另一种垂直居中元素的方法。我在一段时间前遇到了this+technique。基本上，它使用了一个伪元素和vertical-align:+Mid.|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4779732|.block::before+{
++content:+'';
++display:+inline-block;
++height:+100%25;
++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;
}|code-block|syntax|javascript|4779733|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/centering-in-the-unknown/^0|P|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Here's another way to center an element vertically. I came across <a href="http://css-tricks.com/centering-in-the-unknown/" rel="noreferrer">this technique</a> some time ago. Basically it uses a pseudo element and vertical-align: middle.</p>

<pre><code>.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;
}
</code></pre>


blocks|key|2655670|text|既然已经是2019年了，你也可以使用flexbox来实现这一点:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2655671|为此，请将以下类添加到父元素：|2655672|display:+flex;
flex-direction:+column;
justify-content:+center;|code-block|syntax|javascript|2655673|查看此Fiddle|offset|length|2655674|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jm6txa18/1/^0|0|0|0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

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

<p>To do so, add the following classes to the parent element:</p>

<pre><code>display: flex;
flex-direction: column;
justify-content: center;
</code></pre>

<p>See this <a href="http://jsfiddle.net/jm6txa18/1/" rel="noreferrer">Fiddle</a></p>


blocks|key|2655589|text|我会尝试将文本放入另一个元素中，您知道(或设置)该元素的大小。然后设置它的相对位置，顶部，左侧50%25和负的左右边距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2655590|See+this+Fiddle|offset|length|2655591|唯一的问题是，这依赖于一个已知/固定的文本块。如果文本是可变的，恐怕您将不得不求助于Javascript。|2655592|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/YKh8P/1/^0|0|0|F|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>I'd try putting the text inside another element, of which you know (or set) the size. Then setting relative positioning to it, top, left 50% and negative left and right margins.</p>

<p><a href="http://jsfiddle.net/YKh8P/1/" rel="nofollow">See this Fiddle</a> </p>

<p>The only problem is that this relies on a known/fixed textblock. If the text is variable, I'm afraid you will have to resort to using Javascript..</p>


blocks|key|4779750|text|关于超链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4779751|关于主菜单中的链接我遇到了这个问题。因为它是<li>标签中的<a>，所以我需要一些表面来使链接是可点击/可触摸的(参见touch+target+size)。所以我所做的就是为<ul>设置一个固定的高度(在本例中是通过它的父级)，<li>-s是它的一个百分比，<a>-s有一个最小高度和行高属性设置给它们，从那里很容易设置顶部。代码：|offset|length|style|CODE|4779752|.menu-header-main-container{
position:+fixed;
top:+0;
bottom:+160px;
}++++
.menu-header-main-container+ul.menu+{
++++++++++height:+100%25;+}
++++++++++.menu-header-main-container+ul.menu+li+{
++++++++++++height:+33.33%25;
++++++++++++max-height:+110px;+}
++++++++++++.menu-header-main-container+ul.menu+li+a+{
++++++++++++++line-height:+40px;
++++++++++++++min-height:+40px;
++++++++++++++top:+calc(50%25+-+20px);
++++++++++++++position:+relative;+}+}|code-block|syntax|javascript|4779753|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/fundamentals/accessibility/accessible-styles^0|0|M|4|U|3|2F|4|36|4|3L|3|1N|H|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]|$D|12|E|13|F|G]|$D|14|E|15|F|G]]|9|@$D|16|E|17|1|18]]|A|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Regarding hyperlinks:</p>

<p>I was having this problem regarding links in main menu. And since it was <code>&lt;a&gt;</code> in <code>&lt;li&gt;</code> tags I needed some surface for the links to be clickable/touchable(see <a href="https://developers.google.com/web/fundamentals/accessibility/accessible-styles" rel="nofollow noreferrer">touch target size</a>). 
So what I did was for the <code>&lt;ul&gt;</code> I set a fixed height(through it's parent in this case), the <code>&lt;li&gt;</code>-s are a percentage of it and the <code>&lt;a&gt;</code>-s have a min-height and line-height properties set to them and it's easy from there to set the top. The code:</p>

<pre><code>.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; } }
</code></pre>


blocks|key|3136667|text|如果仅使用CSS，则不能将行高设置为父元素高度的100%25。相反，您可以使用CSS将元素垂直居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3136668|​|3136669|.parent+{
+++height:150px;
+++position:relative;
+++border:1px+solid+#FDD;
}
.position-center+{
++++position:absolute;
++++top:50%25;
++++transform:translateY(-50%25);
}|code-block|syntax|javascript|3136670|<div+class="parent">
++<span+class="position-center">I+am+vertically+centered+element</span>
</div>|3136671|3136672|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You cannot set the line-height to 100% of the parent element's height with only CSS. Rather, you can use CSS to center an element vertically.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
   height:150px;
   position:relative;
   border:1px solid #FDD;
}
.position-center {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
  &lt;span class="position-center"&gt;I am vertically centered element&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I have a responsive element where it's width and height will both scale. Inside this I have some text which I want to center vertically.</p>

<p>How can I set the text's <code>line-height</code> to be the same as it's parent if I don't know the parent's height?</p>

<p><code>line-height: 100%</code> is relative to the font's regular height so this doesn't help...</p>


Set line-height as a percentage relative to the parent element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个响应式元素，它的宽度和高度都会缩放。在这里面我有一些我想要垂直居中的文本。如果我不知道父文本的高度，如何将文本的line-height设置为与其父文本相同？line-height: 100%是相对于字体的常规高度的，所以这没有帮助...

问将line-height设置为相对于父元素的百分比
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将line-height设置为相对于父元素的百分比EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将line-height设置为相对于父元素的百分比
EN