I wanted to stylize a hr that would support an image in the middle.
Type:
------ image ------
I thought about making the image already with a line ready in Photoshop, but this makes it difficult to be responsive.
Is it possible to style hr to display 100% width, with the image in the center?
The ideal in this case is not to use the <hr> tag, because since what you want to do is not content level but visual, the semantically speaking is you only use the <img> tag.
The solution would be something 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> You may not need to make an image in photoshop, just stylize 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 this question
Only with hr will not be able to do this.
You need to use other elements.
See in this example what 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> Do to only with <hr> yes!
It even works up to IE (at least in IE11 it works)
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>You can stylize an HR by creating a line with CANVAS;
If you are not using any framework like BootStrap for example, you will have to create your CSS on 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>