blocks|key|327906|text|试试这些风格：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|327907|p.event_desc+{
++font:+bold+12px+"Helvetica+Neue",+Helvetica,+Arial,+sans-serif;
++line-height:+14px;
++height:75px;
++margin:+0px;
++display:+table-cell;
++vertical-align:+middle;
++padding:+10px;
++border:+1px+solid+#f00;
}|code-block|syntax|javascript|327908|<p+class="event_desc">lorem+ipsum</p>|327909|​|327910|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Try these styles:
<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>p.event_desc {
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 14px;
  height:75px;
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid #f00;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="event_desc"&gt;lorem ipsum&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|544741|text|为此，您可以使用line-height。只需将其设置为p标记的确切高度即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|544742|p.event_desc+{
++line-height:35px;
}|code-block|syntax|javascript|544743|entityMap^0|8|B|R|1|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>You can use <code>line-height</code> for that. Just set it up to the exact height of your <code>p</code> tag.</p>

<pre><code>p.event_desc {
  line-height:35px;
}
</code></pre>


blocks|key|328055|text|如果涉及表格或设置行高的答案对您不起作用，您可以尝试在div中包装p元素，并设置其相对于父div高度的位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|328056|​|328057|.parent-div{
++width:+100px;
++height:+100px;
++background-color:+blue;
}

.text-div{
++position:+relative;
++top:+50%25;
++transform:+translateY(-50%25);
}

p.event_desc{
++font:+bold+12px+"Helvetica+Neue",+Helvetica,+Arial,+sans-serif;
++color:+white;
++text-align:+center;
}|code-block|syntax|javascript|328058|<div+class="parent-div">
++<div+class="text-div">
+++<p+class="event_desc">
++++MY+TEXT
+++</p>
++</div>
</div>|328059|328060|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>If the answers that involve tables or setting line-height don't work for you, you can experiment with wrapping the p element in a div and style its positioning relative to the height of the parent div. </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-div{
  width: 100px;
  height: 100px;
  background-color: blue;
}

.text-div{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

p.event_desc{
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent-div"&gt;
  &lt;div class="text-div"&gt;
   &lt;p class="event_desc"&gt;
    MY TEXT
   &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|545257|text|因此，就我个人而言，我不确定最好的方法是什么，但我发现有一件事对垂直对齐很有效，那就是使用Flex，因为你可以证明它的内容！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|545258|假设您有以下HTML和CSS：|545259|​|545260|.paragraph+{+
++++++font-weight:+light;
++++++color:+gray;
++++++min-height:+6rem;
++++++background:+lightblue;
++}|code-block|syntax|javascript|545261|<h1+class="heading">+Nice+to+meet+you!+</h1>
<p+class="paragraph">+This+is+a+paragraph+</p>|545262|545263|我们最终得到了一个没有垂直居中的段落，现在如果我们使用Flex列，并对其应用最小高度%2B+BG，我们会得到以下结果：|545264|545265|.myflexbox+{
++++min-height:+6rem;
++++display:+flex;
++++flex-direction:+column;
++++justify-content:+center;
++++background:+lightblue;
}

.paragraph+{+
++++++font-weight:+light;
++++++color:+gray;
++}|545266|<h1+class="heading">+Nice+to+meet+you!+</h1>
<div+class="myflexbox">
++++<p+class="paragraph">+This+is+a+paragraph+</p>
</div>|545267|545268|但是，在某些情况下，您不能如此轻松地将P标记包装在div中，在P标记上使用Flexbox是非常好的做法，即使这不是最好的做法。|545269|545270|.myflexparagraph+{
++++min-height:+6rem;
++++display:+flex;
++++flex-direction:+column;
++++justify-content:+center;
++++background:+lightblue;
}

.paragraph+{+
++++++font-weight:+light;
++++++color:+gray;
++}|545271|<h1+class="heading">+Nice+to+meet+you!+</h1>
<p+class="paragraph+myflexparagraph">+This+is+a+paragraph+</p>|545272|545273|我不知道这是好是坏，但如果这只对某个地方的一个人有帮助，那仍然是多一个人，然后就是零！|545274|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1A|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|1B|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1D|8|@]|9|@]|A|$]]|$1|P|3|E|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1F|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|H|7|1G|8|@]|9|@]|A|$I|J]]|$1|U|3|E|5|6|7|1H|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1I|8|@]|9|@]|A|$]]|$1|X|3|E|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|H|7|1K|8|@]|9|@]|A|$I|J]]|$1|10|3|11|5|H|7|1L|8|@]|9|@]|A|$I|J]]|$1|12|3|E|5|6|7|1M|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|1N|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|16|$]]

<p>So personally I'm not sure of the best-method way, but one thing I have found works well for vertical alignment is using Flex, as you can justify it's content!</p>
<p>Let's say you have the following HTML and CSS:</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>.paragraph { 
      font-weight: light;
      color: gray;
      min-height: 6rem;
      background: lightblue;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="heading"&gt; Nice to meet you! &lt;/h1&gt;
&lt;p class="paragraph"&gt; This is a paragraph &lt;/p&gt;</code></pre>
</div>
</div>
</p>
<p>We end up with a paragraph that isn't vertically centered, now if we use a Flex Column and apply the min height + BG to that we get the following:</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>.myflexbox {
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: lightblue;
}

.paragraph { 
      font-weight: light;
      color: gray;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="heading"&gt; Nice to meet you! &lt;/h1&gt;
&lt;div class="myflexbox"&gt;
    &lt;p class="paragraph"&gt; This is a paragraph &lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>However, in some situations you can't just wrap the P tag in a div so easily, well using Flexbox on the P tag is perfectly fine even if it's not the nicest practice.</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>.myflexparagraph {
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: lightblue;
}

.paragraph { 
      font-weight: light;
      color: gray;
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="heading"&gt; Nice to meet you! &lt;/h1&gt;
&lt;p class="paragraph myflexparagraph"&gt; This is a paragraph &lt;/p&gt;</code></pre>
</div>
</div>
</p>
<p>I have no clue if this is good or bad but if this helps only one person somewhere that's still one more then naught!</p>


blocks|key|544841|text|你可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544842|++++line-height:35px;|code-block|syntax|javascript|544843|你真的不应该在段落上设置高度，因为这对可访问性不好(如果用户增加文本大小等会发生什么情况)|544844|取而代之的是使用一个带有高度的Div，其中的p具有正确的行高：|544845|++++<div+style="height:35px;"><p+style="line-height:35px;">text</p></div>|544846|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>you could use </p>

<pre><code>    line-height:35px;
</code></pre>

<p>You really shouldnt set a height on paragraph as its not good for accessibility (what happens if the user increase text size etc)</p>

<p>Instead use a Div with a hight and the p inside it with the correct line-height:</p>

<pre><code>    &lt;div style="height:35px;"&gt;&lt;p style="line-height:35px;"&gt;text&lt;/p&gt;&lt;/div&gt;
</code></pre>


blocks|key|544899|text|如果您使用Bootstrap，请尝试将margin+bottom+0分配给段落，然后将属性align-items-center分配给容器，例如，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544900|<div+class="row+align-items-center">
+++++<p+class="col-sm-1+mb-0">
++++++++++....
+++++</p>
</div>|code-block|syntax|javascript|544901|默认情况下，Bootstrap会分配一个计算页边距底部，所以mb-0禁用了这一功能。|544902|我希望它能帮上忙|544903|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If you use Bootstrap, try to assign margin-bottom 0 to the paragraph and after assign the property align-items-center to container, for example, like this:</p>

<pre><code>&lt;div class="row align-items-center"&gt;
     &lt;p class="col-sm-1 mb-0"&gt;
          ....
     &lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>Bootstrap by default assign a calculate margin bottom, so mb-0 disabled this.</p>

<p>I hope it helps</p>


blocks|key|545105|text|带有text-align:+center属性的用户vertical-align:+middle;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|545106|<!DOCTYPE+html>
<html>
<head>
<style>
.center+{
++border:+3px+solid+green;
++text-align:+center;
}

.center+p+{
++display:+inline-block;
++vertical-align:+middle;
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In+this+example,+we+use+the+line-height+property+with+a+value+that+is+equal+to+the+height+property+to+center+the+div+element:</p>

<div+class="center">
++<p>I+am+vertically+and+horizontally+centered.</p>
</div>

</body>
</html>|code-block|syntax|javascript|545107|entityMap^0|2|I|P|N|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>User <code>vertical-align: middle;</code> along with <code>text-align: center</code> property</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.center {
  border: 3px solid green;
  text-align: center;
}

.center p {
  display: inline-block;
  vertical-align: middle;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;Centering&lt;/h2&gt;
&lt;p&gt;In this example, we use the line-height property with a value that is equal to the height property to center the div element:&lt;/p&gt;

&lt;div class=&quot;center&quot;&gt;
  &lt;p&gt;I am vertically and horizontally centered.&lt;/p&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|328119|text|可扩展为多行文本的替代解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|328120|将垂直和水平填充设置为(height+-+line-height)+/+2|offset|length|style|CODE|328121|p.event_desc+{
++++font:+bold+12px+"Helvetica+Neue",+Helvetica,+Arial,+sans-serif;
++++line-height:+14px;
++++padding:+10.5px+0;
++++margin:+0px;
}|code-block|syntax|javascript|328122|entityMap^0|0|B|Q|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Alternative solution which scales for multi-line text:</p>

<p>Set vertical and horizontal padding to be <code>(height - line-height) / 2</code></p>

<pre><code>p.event_desc {
    font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 14px;
    padding: 10.5px 0;
    margin: 0px;
}
</code></pre>


blocks|key|328159|text|下面的样式将为您垂直居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|328160|p.event_desc+{
+font:+bold+12px+"Helvetica+Neue",+Helvetica,+Arial,+sans-serif;
+line-height:+14px;
+height:+35px;
+display:+table-cell;
+vertical-align:+middle;
+margin:+0px;
}|code-block|syntax|javascript|328161|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Below styles will vertically center it for you.</p>
<pre><code>p.event_desc {
 font: bold 12px &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
 line-height: 14px;
 height: 35px;
 display: table-cell;
 vertical-align: middle;
 margin: 0px;
}
</code></pre>


blocks|key|545058|text|在我的例子中，自动保证金运行得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|545059|p+{
++++font:+22px/24px+Ubuntu;
++++margin:auto+0px;
}|code-block|syntax|javascript|545060|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In my case margin auto works fine.</p>
<pre><code>p {
    font: 22px/24px Ubuntu;
    margin:auto 0px;
}
</code></pre>


<p>I would like to know to align the text in a <code>p</code> element to be vertically centered.</p>
<p>Here are my styles:</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>p.event_desc {
     font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
     line-height: 14px;
     height: 35px;
     margin: 0px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="event_desc"&gt;Lorem ipsum.&lt;/p&gt;</code></pre>
</div>
</div>
</p>


How do I vertically align text in a paragraph?

容器

Ubuntu

我想知道如何将p元素中的文本垂直居中对齐。以下是我的风格：​p.event_desc {     font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;     line-height: 14px;     height: 35px;     margin: 0px;}<p class="event_desc">Lorem i

问如何垂直对齐段落中的文本？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何垂直对齐段落中的文本？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何垂直对齐段落中的文本？
EN