CODEWITHSUNDEEP
htmlcss
user3861559
user3861559

Reputation: 993

Aligning hr tags and img tags in a line

I am trying to align a hr tag, an image and a hr tag in that order in the same line.

My code so far

<div class="arrow">
   <hr class="left">
   <img src="http://bit.ly/100X8XQ" height="10" width="10">
   <hr class="right">
<div>

CSS:

.arrow {
    margin-top: 20px;
}

.left {
    martin-left: 20px;
}

img {
    display: inline-block;
}

.right {
    martin-right: 20px;
}

I tried having display:inline block in multiple places but I wasn't able to get it to work. Is there a way I can fix it?

http://jsfiddle.net/ceobm2he/

Upvotes: 2

Views: 1583

Answers (3)

Alex Shesterov
Alex Shesterov

Reputation: 27525

A somewhat strange requirement. <hr> is has semantic meaning and should not be used for styling-only purposes. Lines in design are usually done via borders/outlines.

But this is what you probably want: 

.arrow{
}

.left{
    margin-right:20px;
    float: left;
    width: 46%;
}

img{
    float: left;
}

.right{
    margin-left:20px;
    float: right;
    width: 46%;    
}
<div class="arrow">
   <hr class="left">
   <img src="http://bit.ly/100X8XQ" height="10" width="10">
   <hr class="right">
<div>

Fiddle here.

Note: there was a typo in the word "marGin" in your code.

Upvotes: 1

dfsq
dfsq

Reputation: 193261

One more version using calc to calculate the width of hr tags:

.arrow > * {
    display: inline-block;
}
.arrow hr {
    width: calc(50% - 45px); /* 45px = desired margin left + right */
}
.arrow .left {
    margin-left: 20px;
}
.arrow img {
    margin: 0;
    margin: 0 10px;
}
.arrow .right {
    margin-right: 20px;
}
<div class="arrow">
    <hr class="left" />
    <img src="http://bit.ly/100X8XQ" height="10" width="10" />
    <hr class="right" />
</div>

Note: calc function is supported in all major browsers including IE9+.

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24713

You could just set a negative margin on the image

DEMO http://jsfiddle.net/ceobm2he/2/

img{
    display: block;
    margin:-6px auto 0 auto;
}
.left {
    margin:0 20px;
}

If you want some space around the image then add some padding and background styling

DEMO http://jsfiddle.net/ceobm2he/4/

Upvotes: 1

Related Questions