如何垂直對齊段落中的文本？
[英]How do I vertically align text in a paragraph?
問題描述
我想知道將p元素中的文本對齊為垂直居中。
這是我的 styles：
p.event_desc { font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 14px; height: 35px; margin: 0px; }
<p class="event_desc">Lorem ipsum.</p>
12 個解決方案
解決方案1
68 已采納 2012-06-15 13:55:08
試試這些風格：
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; }
<p class="event_desc">lorem ipsum</p>
解決方案2
30 2012-06-15 13:52:55
您可以使用line-height 。 只需將其設置為p標簽的確切高度即可。
p.event_desc {
line-height:35px;
}
解決方案3
5 2019-09-07 03:23:13
如果涉及表格或設置 line-height 的答案對您不起作用，您可以嘗試將 p 元素包裝在 div 中，並相對於父 div 的高度設置其位置的樣式。
.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; }
<div class="parent-div"> <div class="text-div"> <p class="event_desc"> MY TEXT </p> </div> </div>
解決方案4
1 2012-06-15 15:09:55
你可以用
line-height:35px;
您真的不應該在段落上設置高度，因為它不利於可訪問性（如果用戶增加文本大小等會發生什么）
而是使用帶有高度的 Div 和帶有正確行高的 p ：
<div style="height:35px;"><p style="line-height:35px;">text</p></div>
解決方案5
1 2019-03-02 11:36:08
如果您使用 Bootstrap，請嘗試將 margin-bottom 0 分配給段落，然后將屬性 align-items-center 分配給容器，例如，如下所示：
<div class="row align-items-center">
<p class="col-sm-1 mb-0">
....
</p>
</div>
Bootstrap 默認分配一個計算邊距底部，所以 mb-0 禁用了這個。
我希望它有幫助
解決方案6
1 2020-08-31 09:43:20
用戶vertical-align: middle; 連同text-align: center屬性
<!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>
解決方案7
1 2021-02-18 17:50:27
所以我個人不確定最好的方法，但我發現垂直對齊的一件事是使用 Flex，因為你可以證明它的內容是合理的！
假設您有以下 HTML 和 CSS：
.paragraph { font-weight: light; color: gray; min-height: 6rem; background: lightblue; }
<h1 class="heading"> Nice to meet you! </h1> <p class="paragraph"> This is a paragraph </p>
我們最終得到了一個不是垂直居中的段落，現在如果我們使用 Flex Column 並將最小高度 + BG 應用於我們得到以下內容：
.myflexbox { min-height: 6rem; display: flex; flex-direction: column; justify-content: center; background: lightblue; } .paragraph { font-weight: light; color: gray; }
<h1 class="heading"> Nice to meet you! </h1> <div class="myflexbox"> <p class="paragraph"> This is a paragraph </p> </div>
然而，在某些情況下，你不能這么容易地將 P 標簽包裝在一個 div 中，在 P 標簽上使用 Flexbox 是非常好的，即使這不是最好的做法。
.myflexparagraph { min-height: 6rem; display: flex; flex-direction: column; justify-content: center; background: lightblue; } .paragraph { font-weight: light; color: gray; }
<h1 class="heading"> Nice to meet you! </h1> <p class="paragraph myflexparagraph"> This is a paragraph </p>
我不知道這是好是壞，但如果這在某個地方只對一個人有幫助，那還是一無是處！
解決方案8
0 2017-07-14 13:39:01
嘗試這個：
display: table-cell;
vertical-align: middle;
padding: 10px;
解決方案9
0 2020-05-10 22:10:36
適用於多行文本的替代解決方案：
將垂直和水平填充設置為(height - line-height) / 2
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
padding: 10.5px 0;
margin: 0px;
}
解決方案10
0 2020-07-08 21:26:31
下面的樣式將為您垂直居中。
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;
}
解決方案11
0 2022-01-27 13:45:41
准確地說，垂直對齊段落中的文本。
HTML
<main>
<p><span>TEXT to be centered in P tag</span></p>
</main>
CSS
main {
height: 400px;
position: relative;
}
main>p {
min-height: 128px;
line-height: 128px;
font-size: 48px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
main>p>span {
position: absolute;
left: 0;
right: 0;
top: 64px;
transform: translateY(-68px);
-webkit-transform: translateY(-68px);
-moz-transform: translateY(-68px);
-ms-transform: translateY(-68px);
text-align: center;
}
解決方案12
0 2022-08-27 12:40:28
嘗試這個：
<div class="parent">
<p class="child"> This is a paragraph </p>
</div>
parent {
display: flex;
justify-content: center;
align-items: center;
}
p {
text-align: center;
}
成功的。
解決方案13
-1 2020-08-31 09:05:23
在我的情況下，保證金自動工作正常。
p {
font: 22px/24px Ubuntu;
margin:auto 0px;
}
如何在HTML段落中垂直對齊范圍和文本？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.