当前位置：文江博客话题详情

div 中的中心文本？

发布于 2024-11-08 17:02:20 字数 140 浏览 0 评论 0原文

我有一个 div 30px 高和 500px 宽。此 div 可以包含两行文本，一行在一行，并相应地设置样式（填充）。但有时它只包含一行，我希望它居中。这可能吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不喜欢何必死缠烂打 2024-11-15 17:02:20

要水平居中，请使用 text-align:center。

要垂直居中，只有在要对齐的同一行中存在另一个元素时，才能使用 vertical-align:middle。
此处查看其工作情况。

我们使用高度为100%的空span，然后将内容放在下一个元素中，并设置vertical-align:middle。

还有其他技术，例如使用表格单元格或将内容放入绝对定位的元素中，并将顶部、底部、左侧和右侧全部设置为零，但它们都存在跨浏览器兼容性问题。

回复收藏 0 原文

树深时见影 2024-11-15 17:02:20

我相信您希望文本在 div 内垂直居中，而不是（仅）水平居中。我知道执行此操作的唯一可靠方法是

display: table-cell;
vertical-align: middle;

在您的 div 上使用：，并且它适用于任意数量的行。
您可以在此处查看测试： http://jsfiddle.net/qMtZV/1/

请务必检查浏览器对此的支持属性，因为它在 IE7 或更早版本中不受支持。

更新 02/10/2016

五年后，这项技术仍然有效，但我相信这个问题有更好、更可靠的解决方案。由于现在 Flexbox 支持很好，您可能需要按照以下方式做一些事情：http://codepen.io/michelegera/pen/gPZpqE。

I believe you want the text to be vertically centered inside your div, not (only) horizontally. The only reliable way I know of doing this is using:

display: table-cell;
vertical-align: middle;

on your div, and it works with any number of lines.
You can see a test here: http://jsfiddle.net/qMtZV/1/

Be sure to check browser support of this property, as it is not supported — for example — in IE7 or earlier.

UPDATE 02/10/2016

Five years later this technique is still valid, but I believe there are better and more solid solutions to this problem. Since Flexbox support is good nowadays, you might want to do something along these lines: http://codepen.io/michelegera/pen/gPZpqE.

回复收藏 0 原文

╄→承喏 2024-11-15 17:02:20

对于父 div，使用以下 CSS：

style="display: flex;align-items: center;"

For the parent div,use following CSS:

style="display: flex;align-items: center;"

回复收藏 0 原文

謌踐踏愛綪 2024-11-15 17:02:20

HTMLCSS

<div class="outside">
  <div class="inside">
      <p>Centered Text</p>
  </div>
</div>

.outside { 
  position: absolute; 
  display: table; 
}

.inside {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

HTML

<div class="outside">
  <div class="inside">
      <p>Centered Text</p>
  </div>
</div>

CSS

.outside { 
  position: absolute; 
  display: table; 
}

.inside {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

回复收藏 0 原文

眼睛会笑 2024-11-15 17:02:20

如果

中有文本：

text-align: center;
vertical-align: middle;
display: table-cell;

If you have text inside a <div>:

text-align: center;
vertical-align: middle;
display: table-cell;

回复收藏 0 原文

转身泪倾城 2024-11-15 17:02:20

div {
    height: 256px;
    width: 256px;
    display: table-cell;
    text-align: center;
    line-height: 256px;
}

诀窍是将 line-height 设置为等于 div 的 height。

div {
    height: 256px;
    width: 256px;
    display: table-cell;
    text-align: center;
    line-height: 256px;
}

The trick is to set the line-height equal to the height of the div.

回复收藏 0 原文

旧城烟雨 2024-11-15 17:02:20

如果存在尺寸问题，您可以尝试在CSS中使用属性vertical-align，以便将其垂直居中

div {  
    vertical-align:middle;  
}

，请注意2个文本行和填充样式很有可能具有超过30px的高度。

例如，如果您的字体大小为 12 px，div 内边距为 5 px，则单行 div 高度将为 5px (padding-top) + 12px + 5 px (padding-bottom) = 22px < 30px所以没问题，

使用2行文本div，它将是5px + 12px * 2（2行）+ 5px = 34px > 30px，你的div高度会自动改变。

尝试增加 div 高度（也许 40 像素）或减少内边距。

希望它会有所帮助

You may try to use in your CSS the property vertical-align in order to center it verticaly

div {  
    vertical-align:middle;  
}

if it's a size problem, please notice that 2 text lines and a padding style have great chance to have a height superior to 30px.

For example, if your font size is 12 px and your div padding is 5 px, a one text line div height will be 5px (padding-top) + 12px + 5 px (padding-bottom) = 22px < 30px so no problem,

With a 2 text lines div, it will be 5px +12px *2 (2 lines) + 5px = 34px > 30px and your div height will be automatically changed.

Try either to increase your div height (maybe 40px) or to reduce your padding.

Hope it will help

回复收藏 0 原文

↙厌世 2024-11-15 17:02:20

添加行高也有帮助。

text-align: center;
line-height: 18px; /* for example. */

Adding line height helps too.

text-align: center;
line-height: 18px; /* for example. */

回复收藏 0 原文

榆西 2024-11-15 17:02:20

我可能在这里遗漏了一些东西，但是你尝试过吗：

text-align:center;

I may be missing something here, but have you tried:

text-align:center;

回复收藏 0 原文

山色无中 2024-11-15 17:02:20

这对你有用吗？

div { text-align: center; }

Will this work for you?

div { text-align: center; }

回复收藏 0 原文

み格子的夏天 2024-11-15 17:02:20

我环顾四周，这

display: table-cell;
vertical-align: middle;

似乎是最受欢迎的解决方案

I've looked around and the

display: table-cell;
vertical-align: middle;

seems to be the most popular solution

回复收藏 0 原文

泪痕残 2024-11-15 17:02:20

display: block;
text-align: center;

display: block;
text-align: center;

回复收藏 0 原文

待天淡蓝洁白时 2024-11-15 17:02:20

<div class="header">
<div class="phone">☎ 052 824 134</div>
<div class="adres">✯ бул. Княз Борис I, No 115 - Дворец на Културата и Спорта</div>

使用 flexbox 使 div 居中

.header{
        background: #ff6400;
        height:100px;
        box-sizing: border-box;
        display: flex;
        justify-content:'center';
        flex-direction: column;
    }
    .phone{
        color: white; 
        font-size: 20px; 
        padding: 9px 0 0 125px;
     
    }
    .adres{
        display: inline-block;
        color: white; 
        font-size: 20px;
        width: 50%;
        margin: 0 auto;
        text-align:'center';
    }

}

<div class="header">
<div class="phone">☎ 052 824 134</div>
<div class="adres">✯ бул. Княз Борис I, No 115 - Дворец на Културата и Спорта</div>

using flexbox To center div

.header{
        background: #ff6400;
        height:100px;
        box-sizing: border-box;
        display: flex;
        justify-content:'center';
        flex-direction: column;
    }
    .phone{
        color: white; 
        font-size: 20px; 
        padding: 9px 0 0 125px;
     
    }
    .adres{
        display: inline-block;
        color: white; 
        font-size: 20px;
        width: 50%;
        margin: 0 auto;
        text-align:'center';
    }

}

回复收藏 0 原文