CODEWITHSUNDEEP
htmlcssimageiconsseparator
Vonwelzen
Vonwelzen

Reputation: 57

Seperator with image icon in the middle

i'm trying to make a separator with an image in the middle. Which is also responsive.

I'm having trouble displaying the icon/image in the middle of the line and in full size. it seems to cut off the top and bottom. could someone take a look at the code?

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

.line-icon {
    text-align: center;
    background-image: url('http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/ster.png');
    background-repeat: no-repeat;
    background-position: center center;
}
.line-icon::before, .line-icon::after {
    width: 25%;
    height: 1px;
    border-top: 1px solid #837048;
    display: inline-block;
    content:'';
    padding-top: 0.5em;
    margin-left: 5%;
    margin-right: 5%;
}

https://jsfiddle.net/L5p8khya/

Upvotes: 0

Views: 1555

Answers (2)

Xahed Kamal
Xahed Kamal

Reputation: 2223

Here is what you are trying to get. Check the result

.line-icon {
    box-sizing: border-box;
    position:relative;
    text-align: center;
    background-image: url('http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/ster.png');
    background-repeat: no-repeat;
    background-position: center center;
    font-size:0;
    height: 40px;
}
.line-icon::before, .line-icon::after {
    box-sizing: border-box;
    width: 40%;
    height: 1px;
    border-top: 1px solid #837048;
    display: inline-block;
    content:'';
    margin-left: 5%;
    margin-right: 5%;
    position:relative;
      top: 50%;
    -moz-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    -o-transform: translatey(-50%);
    -webkit-transform: translatey(-50%);
    transform: translatey(-50%);
}
<div class='line-icon'></div>

Upvotes: 2

Mathijs Rutgers
Mathijs Rutgers

Reputation: 815

Is think this what you're after? Just give the image a height. Also add a margin-top equal to the half of the image (20px in this case).

.line-icon {
    text-align: center;
    background-image: url('http://www.welzendesign.com/startransfer/wp-content/uploads/2015/10/ster.png');
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
}
.line-icon::before, .line-icon::after {
    width: 25%;
    height: 1px;
    border-top: 1px solid #837048;
    display: inline-block;
    content:'';
    padding-top: 0.5em;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
}
<div class='line-icon'></div>

Upvotes: 1

Related Questions