如何仅在文本后面获得背景颜色?

时间:2015-04-13 23:09:47

标签: html5 css3 text background

这是我的代码,但我希望文本背后只有背景颜色enter image description here,而不是在整个屏幕上延伸?enter image description here有什么想法吗?

   .section_title {
      background-color: orange;
      text-align: center;
      margin: 0px auto;
    }

HTML

<div class="col-md-12">
  <div class="section_title">
    <h2>Choose a Pack to Print</h2>
  </div>
</div>

3 个答案:

答案 0 :(得分:1)

一个选项是将display: inline-block;添加到文本元素的CSS中。

答案 1 :(得分:0)

有几种方法可以做到这一点,但最好的方法是制作h2 inlineinline-block

使用inline-block可以设置宽度/高度。

.section-title {
  text-align: center;
}
.section-title h2 {
  display: inline-block;
}

另一种方法是在h2上设置宽度并将边距设置为auto;

.section-title h2 { 
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* for example */
}

如果您希望所有标题都是设定宽度,我会选择第二个标题(允许文本换行)。如果你想让盒子灵活并拥抱内容,我会使用第一个。

答案 2 :(得分:0)

我在display: inline-block;中发现的一个问题是它清除了浮点数错误。相反,我使用width: fit-content;

.highlight {
  background: yellow;
  padding: 0.5em;
  width: fit-content;
}
<h1 class="highlight">Highlight for text only!</h1>
<h1 class="highlight">Highlight me too!</h1>