Custom <Hr> with Image/Character in the Center

Custom hr with image/character in the center

Here's a screenshot of what I was able to produce. See it in action at jsfiddle.net.

And here is the CSS:

body {
  background: #454545;
}

hr {
  font-family: Arial, sans-serif; /* choose the font you like */
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  font-size: 1em; /* choose font size you like */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #676767;
  margin: 20px 10px; /* 20px space above/below, 10px left/right */
  overflow: visible;

  /* ensure 1px gap between borders */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

hr:after {
  content: "§"; /* section sign */
  color: #999;
  display: inline; /* for vertical centering and background knockout */
  background-color: #454545; /* same as background color */
  padding: 0 0.5em; /* size of background color knockout */
}

/* opera doesn't render correctly. hide section sign */
x:-o-prefocus, hr:after {
  content: "";
}

The section sign

To add the section sign, you can use generated content with either :before or :after. The remaining tricky parts are horizontal centering, vertical centering, and knocking out the borders.

Horizontal centering

Horizontal centering is as simple as adding text-align: center to the hr and making sure the generated content is display: inline.

Vertical centering

Vertical centering requires a little knowledge of inline rendering. The vertical space consumed by a line of text is determined by line-height. Even if the line-height is much smaller than the size of the rendered character, the character is still displayed full size, but the space it takes up is dictated by the line-height. Using line-height: 1px achieves the vertical centering.

Knocking out the borders

Finally, the only way I know of to knock out the borders behind the section sign is to cover them up with another color. In this case, we use the same background color as is on the rest of the document so it seems to blend in. Set an appropriate background-color and then use left and right padding to control how much space is to either side of the section sign.

1px gap between the borders

You'll also notice that I'm setting box-sizing: content-box. This is to ensure that the gap between the borders is 1px. (An alternative but equivalent set up would be box-sizing: border-box; height: 3px;.)

Opera rendering bug

@cimmanon pointed out some Opera rendering bugs, so I decided to degrade gracefully and not show the section sign. I think showing just the lines still looks very tidy and professional. If you really want to get this working in Opera, you could use different markup like <div class="hr"></div> (and of course update the CSS to match).

An image in the middle of an HR tag

Rather than

content: '';

Use the url(<url>) notation:

content: url(http://i.stack.imgur.com/yUzqW.png);

hr.style-eight {  margin-top: 2em;  padding: 0;  border: none;  border-top: medium double #333;  color: #333;  text-align: center;}hr.style-eight:after {  content: url(http://i.stack.imgur.com/yUzqW.png);  display: inline-block;  position: relative;  top: -0.7em;  font-size: 1.5em;  padding: 0 0.25em;  background: white;}

<hr class="style-eight" />

Style HR with Image

How about setting the image in the hr element, and using :before and :after to create the lines? That way you won't have to set a background on the image to cover up a single line.

Working Example:

hr {     background: url('http://i.stack.imgur.com/37Aip.png') no-repeat top center;    background-size: contain;    display: block;    height: 18px;    border: 0;    position: relative;}hr:before,hr:after {    content: '';    display: block;    position: absolute;    background: #d7d7d7;    height: 2px;    top: 8px;}hr:before {    left: 0;    right: 50%;    margin-right: 10px;}hr:after {    right: 0;    left: 50%;    margin-left: 10px;}

<hr />

Aligning CSS objects above hr tags

In order to align the rectangle above the hr tag, you can simply give it a display of block and a margin of auto. This will center the rectangle relative to the container.

As for aligning the add button to the center while keeping it fixed, you can wrap the button in a div, give that div a position of fixed and a width of 100%. Then give it a display of flex and justify-content of center. This will center align any children that are in the div.

Depending on how low you want the add button, you can set the bottom property for the newly create div. At the moment I have it at -125px. It's also better to use bottom and pixels as the units because the other elements have fixed sizes.

body{    background-color: #242424;}.page-wrap {    width: 90%;    margin: 0 auto;    height: 98vh;}.buildings-wrap{    width: 95%;    margin: 0 auto;    height: 100%;    text-align: middle;}.rectangle{    height: 650px;    background-color: lightblue;    width: 215px;    display: block;    margin:auto;}.add_btn{    border-radius: 50%;    background-color: lightcyan;    text-align: center;    line-height: 150px;    height: 150px;    width: 150px;    margin: 0 auto;    font-size: 100px;    font-weight: 900;}
hr{  margin: 0 auto 0 auto;}

<div class="page-wrap">        <div class="buildings-wrap">            <br/>            <div style="display: flex; margin: auto;"><div class="rectangle"></div></div>            <hr/>            <div style="width: 100%; display:flex; justify-content: center;position: fixed; bottom: -125px; left: 0;"><button class="add_btn">+</button></div>        </div> </div>

CSS technique for a horizontal line with words in the middle

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

h2 {   width: 100%;    text-align: center;    border-bottom: 1px solid #000;    line-height: 0.1em;   margin: 10px 0 20px; } 
h2 span {     background:#fff;     padding:0 10px; }

<h2><span>THIS IS A TEST</span></h2><p>this is some content other</p>

CSS HR With Ornament

Change the markup tp

<div class='hr'>
  <hr>
  <img src='assets/img/ornament.png' alt=''>
</div>

Add the following to the stylesheet, replacing 16px by a suitable value that depends on the height of the image and the expected font size.

.hr {  text-align: center; }
.hr img { position: relative; top: -16px; }

However, a better approach is to use just an image, centered inside a div element that has a suitable background image that repeats horizontally. The background image would be a piece that is of the same color as the overall page background but has a horizontal line in the middle.

Icon or image in center with line on both sides

Try adding a content to your ::after and ::before, and setting its display:

.line-icon {    text-align: center;}
/* Joined both selectors, since were pretty much the same */.line-icon::before,.line-icon::after {          /* Styles kept */    width: 25%;    height: 1px;
    /* Changed to border-top (instead of border) to simulate a line better */    border-top: 1px solid #ccc; 
    /* Styles added */    display: inline-block;    content: '';      /* Use padding to vertical align the line */    /* Use padding in em for a responsive icon height */    padding-top: 0.5em;       /* Use margins to give the lines some spacement around the icon */    /* Use margins in % for a responsive spacement */    margin-left: 5%;     margin-right: 5%;}

<div class='line-container'><div class='line-icon'>*</div></div>

Center image in div horizontally

Every solution posted here assumes that you know the dimensions of your img, which is not a common scenario. Also, planting the dimensions into the solution is painful.

Simply set:

/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;

or

/* for the img inside your div */
display: block;
margin: 0 auto;

That's all.

Note, that you'll also have to set an initial min-width for your outer div.

---

Related Topics