blocks|key|441631|text|如果你不喜欢display:table技巧(我知道我不喜欢)，这里有一个没有它的解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|441632|.cen+{
++min-height:5em;+width:12em;+background:red;+margin:1em+0;
}
.cen+p+{
++display:inline-block;+vertical-align:middle;
++margin:0+0+0+1em;+width:10em;
}
.cen::after+{
+++display:inline-block;+vertical-align:middle;+line-height:5em;
+++width:0;+content:"\00A0";+overflow:hidden;
}|code-block|syntax|javascript|441633|使用HTML|441634|<div+class="cen">
+<p>Text+in+div+1</p>
</div>|441635|这使div的高度为5em，除非内容更高，否则它会增长。|441636|实况示例here。|441637|编辑:哦，这应该在哪种浏览器上运行？IE8不会合作的|441638|(稍后编辑:更新CSS以处理Chrome中的问题)|441639|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/MrLister/4nhMT/46/^0|6|D|0|0|0|0|0|4|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|S|3|T|5|6|7|1F|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1G|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

<p>If you don't like the <code>display:table</code> trick (I know I don't) here's a solution without it:</p>

<pre><code>.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}
</code></pre>

<p>with HTML</p>

<pre><code>&lt;div class="cen"&gt;
 &lt;p&gt;Text in div 1&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>This gives the div a height of 5em, unless the content is heigher, then it grows.<br>
Live example <a href="http://jsfiddle.net/MrLister/4nhMT/46/">here</a>.</p>

<p>Edit: Oh, which browsers is this supposed to work on? IE8 won't cooperate.</p>

<p>(Later edit: updated CSS to handle issues in Chrome)</p>


blocks|key|441539|text|像这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|441540|HTML|441541|<div>
++++<p>
+++++++Lorem+Ipsum+is+simply
++++</p>
</div>|code-block|syntax|javascript|441542|CSS|441543|div+{
+++display:+table;
}
p+{
+++display:table-cell;
+++vertical-align:+middle;
}|441544|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>somthing like this</p>
<h1>HTML</h1>
<pre><code>&lt;div&gt;
    &lt;p&gt;
       Lorem Ipsum is simply
    &lt;/p&gt;
&lt;/div&gt;
</code></pre>
<h1>CSS</h1>
<pre><code>div {
   display: table;
}
p {
   display:table-cell;
   vertical-align: middle;
}
</code></pre>


blocks|key|655967|text|在样式方面，表格是布局内容的最佳方式(将样式标签放在CSS中)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|655968|<table+style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
++++<td+style="width:250px;vertical-align:middle;">Lorem+ipsum+dolor+sit+amet+ipswum+dolor</td>
++++<td+style="width:50px;vertical-align:top;color:white;">1+Line</td>
</tr>|code-block|syntax|javascript|655969|​|655970|行数将需要一个JS脚本，看看这里：|655971|http://www.webdeveloper.com/forum/archive/index.php/t-44333.html|offset|length|655972|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1S|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>Styling wise, a table would be the best way to layout your content (put the style tags in CSS):</p>

<pre><code>&lt;table style="border:1;collapse;width:300px;padding:5px;background-color:red;"&gt;
&lt;tr&gt;
    &lt;td style="width:250px;vertical-align:middle;"&gt;Lorem ipsum dolor sit amet ipswum dolor&lt;/td&gt;
    &lt;td style="width:50px;vertical-align:top;color:white;"&gt;1 Line&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p></p>

<p>Line count will require a JS script, have a look here:</p>

<p><a href="http://www.webdeveloper.com/forum/archive/index.php/t-44333.html" rel="nofollow">http://www.webdeveloper.com/forum/archive/index.php/t-44333.html</a></p>


blocks|key|656053|text|我喜欢这种解决方案。我在stackoverflow中的某个地方看到过这个技巧，但不记得具体在哪里了。非常有用！:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|656054|​|656055|ul+{
background:+#000;+
++padding-left:+0;
}
ul+li+{
++height:+130px;
++position:+relative;
++-webkit-box-sizing:+border-box;
++++++++++box-sizing:+border-box;
++border-bottom:+3px+solid+#F7F7F7;
}
ul+li:last-of-type+{
++border-bottom:+none;
}
ul+li:after+{
++color:+#333;
++position:+absolute;
++right:+35px;
++font-size:+40px;
++content:+">";
++top:+50%25;
++margin-top:+-24px;
++color:+#FFDA00;
++-webkit-transition:+0.25s+all+ease;
++transition:+0.25s+all+ease;
}
ul+li+a+{
++font-size:+35px;
++font-family:+Arial;
++color:+#fff;
++-webkit-box-sizing:+border-box;
++++++++++box-sizing:+border-box;
++padding-left:+40px;
++height:+100%25;
++line-height:+38px;
++display:+inline-block;
++width:+100%25;
++text-align:+left;
++text-decoration:+none;
}
ul+li+a:before+{
++display:+inline-block;
++vertical-align:+middle;
++content:+"+";
++height:+100%25;
}
ul+li+a+span+{
++display:+inline-block;
++vertical-align:+middle;
}|code-block|syntax|javascript|656056|<ul>
	<li+class="dn">
		<a+href="kapec.ru.php"><span>+Lorem+ipsum+1+LINE</span></a>
		</li>
		<li>
			<a+href="varianti.ru.php"><span>Lorem+ipsum+<br>+2+lines+</span></a>
		</li>

	</ul>|656057|656058|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>I like that kind of solution. I saw somewhere this trick in stackoverflow but do not remember where exactly. Very usefel! :)</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>ul {
background: #000; 
  padding-left: 0;
}
ul li {
  height: 130px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid #F7F7F7;
}
ul li:last-of-type {
  border-bottom: none;
}
ul li:after {
  color: #333;
  position: absolute;
  right: 35px;
  font-size: 40px;
  content: "&gt;";
  top: 50%;
  margin-top: -24px;
  color: #FFDA00;
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
ul li a {
  font-size: 35px;
  font-family: Arial;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
  height: 100%;
  line-height: 38px;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
ul li a:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
ul li a span {
  display: inline-block;
  vertical-align: middle;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
	&lt;li class="dn"&gt;
		&lt;a href="kapec.ru.php"&gt;&lt;span&gt; Lorem ipsum 1 LINE&lt;/span&gt;&lt;/a&gt;
		&lt;/li&gt;
		&lt;li&gt;
			&lt;a href="varianti.ru.php"&gt;&lt;span&gt;Lorem ipsum &lt;br&gt; 2 lines &lt;/span&gt;&lt;/a&gt;
		&lt;/li&gt;

	&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


<p>I have a title that can have one or more lines.</p>

<p>How can I align the text vertically? If it was always one line I could just set the line-height to the container height.</p>

<p>I can do it using JavaScript, but I don't really like it, I'm searching for a pure CSS way. </p>

<p>Also if the container could expand with the lines it would be perfect, so I can always have the same padding on the top and bottom.</p>

<p><img src="https://i.stack.imgur.com/DoVA1.jpg" alt="enter image description here"></p>


css single or multiple line vertical align

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我有一个标题，可以有一行或多行。如何将文本垂直对齐？如果它总是一行，我可以只将line-height设置为容器高度。我可以用JavaScript来做，但我真的不喜欢它，我正在寻找一种纯CSS的方式。此外，如果容器可以随着线条扩展，那将是完美的，这样我就可以在顶部和底部始终有相同的填充。​​

问css单行或多行垂直对齐
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css单行或多行垂直对齐EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css单行或多行垂直对齐
EN