html行

Question

我的html有问题。我正在尝试设置一个html行，在该行上我必须设置一个带文本的div。这是一个例子，但它是一张照片。我想用HTML格式化。

我希望有人可以帮助我。

编辑：

我知道如何在HTML中获得一行，我知道如何用文本获得这个黄色div。问题是。如何在线上获得黄色div。这是我目前的结果。

Answer 1

您可以使用Flexbox和伪元素执行此操作。这是Fiddle

.element {
  display: flex;
  align-items: center;
}
.price {
  background: #FEC538;
  font-size: 30px;
  font-weight: bold;
  padding: 10px 40px;
  border-radius: 50px;
}
.element:before,
.element:after {
  content: '';
  flex: 5;
  height: 3px;
  background: #C3C3C3;
}
.element:after {
  flex: 1;
}

<div class="element">
  <div class="price">Save 35%</div>
</div>

Answer 2

这样做

#temp1

在此处查看：https://jsfiddle.net/IA7medd/6tonuvg6/

Answer 3

那会...... 的 HTML

<div class="center-div"></div>

**Css**
body
{
  background-color: #fcfcfc;
}
.center-div
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 3px;
}

Answer 4

设置width，然后设置margin:auto;。

＆＃13;

＆＃13;

div.c2 {
  margin:auto;
  width:80px;
  text-align:center;
  
  /*color*/
  background-color: #FEC538;
  border-radius: 10px;
}

＆＃13;

<div>
  <div class=c2>Save 35%</div>
<div>

＆＃13;

＆＃13;

＆＃13;