Line with image in the middle

Asked

Viewed 1,015 times

11

I wanted to style a hr to support an image in the middle. Type:

------ image ------

I thought of making the image already with line ready in Photoshop, but this makes it difficult to be responsive.

It is possible to style the hr to display 100% width, with the image in the center?

html css image horizontal

5 answers

4

The ideal in this case is not to use the tag <hr>, because what you want to do is not at the content level but at the visual level, the ideal semantically speaking is you use only the tag <img>.

The solution would be more or less like this.

.imagem-linha {
  margin: 0 auto;
  display: block;
}

.container::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: red;
  position: absolute;
  top: 55px;
  left: 0;
  z-index: -1;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  
  <div class="container">
    <img class="imagem-linha" src="https://www.gravatar.com/avatar/7a34b7ea8f31265a1da1bb03b8f13bec?s=32&d=identicon&r=PG" width="100" />
  </div>

</body>

</html>

3

You may not need to make an image in photoshop, just style a div to behave the way you want, as in the example below:

.hr-middle {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  color: rgba(0, 0, 0, 0.35);
  margin: 8px 0px;
}

.hr-middle::before,
.hr-middle::after {
  content: "";
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.35);
  height: 1px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px 8px;
}
<div class="hr-middle">
  <img src="https://www.gravatar.com/avatar/7a34b7ea8f31265a1da1bb03b8f13bec?s=32&d=identicon&r=PG" width="50" />
</div>

You can look at other ways to do this in this question

1

You can do just with <hr> yes!

Even works until IE (at least in IE11 works)

See below the example. The technique uses the image as the background of <hr> and with the linear-gradient I made the lines.

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    height:50px;
    border: none;
    background-image:url(http://placecage.com/50/50), 
    linear-gradient(to right, #666 0%,#666 45%, #fff 45%, #fff 55%, #666 55%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 50px, 100% 1px;
    background-color: transparent;
} 
<hr>

1

With only one hr You won’t be able to do that. Other elements must be used.

Look at this example I did:

#linha {
  height: 400px;
  position: relative;
  width: 50%;
  margin: auto;
  top: 100px;
}
hr {
  border: 1px solid #F00;
  position: absolute;
  top: 100px;
  width: 100%;
  margin: auto;
  left: 0;
  right: 0;
}
#linha img {
  position: absolute;
  margin: auto;
  top: 55px;
  left: 0;
  right: 0;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div id="linha">
    <hr>
    <img src="https://www.gravatar.com/avatar/7a34b7ea8f31265a1da1bb03b8f13bec?s=32&d=identicon&r=PG" width="100" />
  </div>


</body>

</html>

  • 1

    instead of adding an image after hr, you can add a style: hr:after { content: url('/imagens/imagem.png'); ... }

  • May also.

-1

You can style an HR by creating a line with CANVAS;

If you’re not using any framework like Bootstrap for example, you’ll have to create your CSS in the nail. Here’s an example;

<style>
/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	display: table-cell;
	padding: 3px 10px;
	vertical-align:middle;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
</style>

<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><canvas id="myCanvas" style="width:100%; height:1px; background:blue; "></canvas></div>
<div class="divTableCell" align="center"><img src="http://www.lojaviena.com.br/wp-content/uploads/2016/05/8120.jpg" width="150"></div>
<div class="divTableCell"><canvas id="myCanvas" style="width:100%; height:1px; background:blue; "></canvas></div>
</div>
</div>
</div>

Browser other questions tagged html css image horizontal

You are not signed in. Login or sign up in order to post.