如何使居中对齐的文本与文本的宽度一致？

Question

想知道如何使居中文本的宽度成为文本的宽度？以红色高亮显示，表示宽度为100%。

http://jsfiddle.net/kenhimself/ktkdypyo/

CSS:

h1 {
    text-align: center;
    font-size: 5vh;
    line-height: 1;
    white-space: nowrap;
    background:red;
    color:white;
}

提前致谢！

Answer 1

更改您的 HTML 结构，并为 h2 应用样式。

  <div style="text-align:center"><h1>text is centered</h1><br />
   <h1>but the width is 100%.</h1><br/>
   <h1>How can I make it so that the width</h1><br />
   <h1>is only the widht of the text?</h1>
  </div>

CSS

h1 {
font-size: 5vh;
line-height: 1;
white-space: nowrap;
background:red;
color:white;    
display:inline-block;
}

DEMO

Answer 2

您需要将文本包裹在一个 span 中，并在 span 而不是 h1 中应用背景色。您不能使用相同的元素，因为它们是块级元素。您需要将内联块元素放入块元素中以获得您想要的结果。

例如

<h1><span>this is the entered text</span></h1>

CSS

span {
    background: red;
}

Answer 3

问题已经回答但添加

margin: 0 auto;
display: table;

到 css 无需更改标记即可完成工作。我已经在 ie chrome、mozilla 和 opera 上测试过，似乎都可以。

Answer 4

http://jsfiddle.net/ktkdypyo/2/ 你可以在 h1 标签中添加 span 然后给 span 赋予红色

html, body {
    width:100%;
    height:100%;
    font-size:100%;
    font-family:helvetica;
    font-weight:normal;
    font-style:normal;
}
h1 {
    text-align: center;


}
span{
  font-size: 5vh;
    line-height: 1;
    white-space: nowrap;
    background:red;
    color:white;   
}


<h1><span>text is centered<span></h1>
<h1><span>but the width is 100%.<span></h1>
<br/>
<br/>
<h1><span>How can I make it so that the width</span></h1>
<h1><span>is only the widht of the text?<span></h1>

你在评论中的另一个问题 我怎样才能做到当我将鼠标悬停在任何这些文本上时，它会淡出并被不同的文本取代？ 这是一个有效的 fiddle：http://jsfiddle.net/u7tYE/5060/

如何使居中对齐的文本与文本的宽度一致？

How can I make a center-aligned text's with to be just the text's width?

css

alignment

width

center