mbka mbka - 4 months ago 9
CSS Question

CSS line-image-line that's less than 100% wide, and still responsive?

How do I replicate something like this with HTML/CSS?

sample image

Where:


  1. I can have an icon or small image in the center.

  2. Is responsive, and functions with my current breakpoints.

  3. (fixed - width 80%, margin: 0 auto) The line isn't 100% width across the screen.



I found a few examples on stack overflow, but they don't seem to fit my purpose exactly.

Unfortunately this sample (found here) is exactly what I want to do, but it's picture, so I can't view the source beneath it.

I've got the below code, however as you can see it has 2 problems.

<div style="height: 1px; background-color: grey; text-align: center;">

<span style="position: relative; top: -2.25em; padding: 5px;">
<img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png' alt="text" style="width:80px;height:80px;"></span>

</div>


enter image description here
(See also this Fiddle)




1) Transparency on the image makes the line goes 'through' it. Is there any way I can control this?

2) (fixed - width 80%, margin: 0 auto) The line is 100% width end to end

Thanks !

Edit: Fixed the width issue with (width 80%, margin: 0 auto)

Answer

im a little bit in a rush, try this out though, ill fix the centering when I get home

CSS

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }


.container{
  width:70%;
  margin:0 auto;
}

.left{
  margin:3% auto;
  width:30%;
  float:left;
  border-bottom:1px solid black;
}

img{
  margin:0;
  width:20%;
  float:left;


}

.right{
  margin:3% 0;
  width:30%;
  float:left;
  border-bottom:1px solid black;
}

html

<div class="container clearfix">
  <div class="left"></div>
  <div class="img"></div>
    <img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png'>
  <div class="right"></div>
</div>