D.Bronder D.Bronder - 2 years ago 80
HTML Question

Center div on html line

I have a problem with html. I am trying to set a html line and on that line I have to set a div with text. Here is the example, but it is a photo. I would like to get this in html.


I hope someone can help me.


I know how to get a line in html and I know how to get this yellow div with the text. The problem is. How do I get the yellow div on the line. This is my current result.Current situation

Answer Source

You can do this with Flexbox and pseudo-elements. Here is Fiddle

.element {
  display: flex;
  align-items: center;
.price {
  background: #FEC538;
  font-size: 30px;
  font-weight: bold;
  padding: 10px 40px;
  border-radius: 50px;
.element:after {
  content: '';
  flex: 5;
  height: 3px;
  background: #C3C3C3;
.element:after {
  flex: 1;
<div class="element">
  <div class="price">Save 35%</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download