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|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|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|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|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>


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|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>


<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;     ma...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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