Question

我的要求是使h3元素仅占用该文本中的文本空间量。无法直接使用span。我尝试用h3封装span元素，但它不起作用。红色应该只有文本hello world的宽度。

HTML code：

<div class="parent">
  <h3 class="center">hello world</h3>
</div>

CSS代码：

.parent {
    padding-left:5px;
    overflow:auto;
    background-color:blue;
}

.center {
    text-align:center;
    overflow:auto;
    background-color:red;
}

JSFiddle

Answer 1

尝试

.center {
   display: inline-block;
}

http://jsfiddle.net/pn89b1c8/

将text-align:center添加到.parent div会将h3置于.parent内。

Answer 2

您可以将内联布局应用于h3.center元素（例如，inline-block）。如果您希望在此之后居中h3，则可以将text-align: center应用于.parent

JSFiddle

Answer 3

你可以使用span元素而不是h3，但如果你想要一个h3，只需添加这一行，它就会删除居中

display:inline-block;

如果您想将其居中，请添加

text-align:center

到父div css

Answer 4

你不能使用span？如果我不使用跨度怎么办？

.parent {
    padding-left:5px;
    overflow:auto;
    background-color:blue;
}

.center {
    text-align:center;
    overflow:auto;
    
}
notaspan{
    background-color:red;
}

<div class="parent">
  <h3 class="center"><notaspan>hello world</notaspan></h3>
</div>

Answer 5

看起来每个人都建议使用内联块，你也可以使用它。

.parent {
    background-color:blue;
}
.center {
    background-color:aqua;
    display:table; /*shrink to fit width*/
    margin:auto; /*center it*/
}

<div class="parent">
    <h3 class="center">hello world</h3>
</div>

Answer 6

.center {    
        text-align:center;
        overflow:auto;
        background-color:red;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
}

这样，您无需更改html或显示设置。如果将absolute设置为h3会导致问题，则可以将.parent设置为relative。您甚至可以删除我相信的text-align:center;。

使h3元素将空间作为文本放在其中

6 个答案: