CSS标题以背景为中心，与文本一样长

Question

我想实现这个目标：

所以我尝试了这个：https://jsfiddle.net/bv68ykz0/

h1{
    color: #df5e54;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 300;
    text-align: center;

    background: #df5e54;
    padding: 5px 20px 5px 20px;
    border-radius: 20px;
    color: #f2e4d7;
}

<h1> Headline </h1>

但是你可以看到标题的背景正在通过整个屏幕。我需要做些什么来使它看起来像在图片中？

Answer 1

正如我从你的问题中所理解的那样，问题不是水平线而是标题的背景，所以有很多方法可以做到这一点

1。使用display:inline-block并将h1包裹在div text-align:center

内

＆＃13;

＆＃13;

h1{
	color: #df5e54;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 300;
	text-align: center;

	background: #df5e54;
	padding: 5px 20px 5px 20px;
	border-radius: 20px;
	color: #f2e4d7;
  display:inline-block;
}
div {
  text-align:center;
}

＆＃13;

<div>
<h1>
Headline
</h1>
</div>

＆＃13;

＆＃13;

＆＃13;

2。将h1内的文字换成span并将CSS样式应用于其中

＆＃13;

＆＃13;

h1{
	color: #df5e54;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 300;
	text-align: center;


	
	color: #f2e4d7;
  
}
h1 span {
  	background: #df5e54;
    padding: 5px 20px 5px 20px;
	border-radius: 20px;
}

＆＃13;

<h1>
<span>Headline</span>
</h1>

＆＃13;

＆＃13;

＆＃13;

P.S。 解决方案取决于HTML结构的其余部分。

Answer 2

如果flexbox是一个选项，您可以这样做：

1. 使用包装并将其display: flex

2. 使用 psuedo 元素

创建行

3. align-items:center负责垂直对齐，而justify-content: center负责水平对齐

4. flex: 1提供给行使得该行在h1

   之后所有空白

见下面的演示：

h1 {
  color: #df5e54;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 300;
  text-align: center;
  background: #df5e54;
  padding: 5px 20px 5px 20px;
  border-radius: 20px;
  color: #f2e4d7;
}
.wrapper {
  display: flex;
  align-items:center;
  justify-content: center;
  background: #F2E4D7;
}
.wrapper:after,
.wrapper:before {
  content: '';
  border-top: 1px solid red;
  flex: 1;
  height: 0;
}

<div class="wrapper">
  <h1>
Headline
</h1>
</div>

Answer 3

你可以试试这个：

.text-holder {
  text-align: center;
  position: relative;
  z-index: 2;
}

h1 {
  display: inline-block;
	color: #df5e54;
  margin: 0;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 300;
	text-align: center;
	background: #df5e54;
	padding: 5px 20px 5px 20px;
	border-radius: 20px;
	color: #f2e4d7;
  position: relative;
  z-index: 3;
}

.text-holder:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 1px;
  background: #df5e54;
  z-index: 1;
}

<div class="text-holder">
  <h1>
    Headline
  </h1>
</div>

希望这有帮助！

Answer 4

您可以尝试类似

的内容

    h1{
	color: #df5e54;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 300;
	text-align: center;
position:relative;
	background:#F2E4D7;
	
	color: #f2e4d7;
}
h1 span:first-child{
  padding: 5px 20px 5px 20px;
	border-radius: 20px;
  background: #df5e54;
  display:inline-block;
  position:relative;
  z-index:1;
}
h1 span:nth-of-type(2){
  position:absolute;
  top:50%;
  border-top:1px solid #df5e54;
  height:1px;
  width:100%;
  left:0;
}

<h1>
<span>Headline</span>
<span>&nbsp;</span>
</h1>

Fiddle Demo