CODEWITHSUNDEEP
css
Nesta
Nesta

Reputation: 1008

Divider with centred image in CSS?

How can I make this divider with a logo in the centre in CSS? ! I've been trying but didn't even got close yet. What would be the best way to achieve this.

Thank you!

Update This needs to be placed on top of a bg image so the gaps around the logo must be transparent.

Sorry guys this one is a little tricky I know...

enter image description here

Here's the PNG

enter image description here

Upvotes: 1

Views: 6480

Answers (2)

davidpauljunior
davidpauljunior

Reputation: 8338

Well, if you're background is totally plain then it's relatively straight forward.

The HTML

<header>
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</header>

The CSS

body {
  margin: 0;
  background: white;
}

#logo {
  width: 200px; /* Width of image */
  padding: 40px; /* Creates space around the logo */
  margin: 0 auto; /* Centers the logo */
  background: white; /* Must be same as body */
  position: relative; /* Brings the div above the header:after element */
}

#logo img {
  display: block;
}

/* :after pseudo element to create the horizontal line */
header:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}

Working demo here.

EDIT

For situations where the body (or containing div) is not a solid colour, try the following:

HTML

<div id="header">
  <div id="logo">
    <img src="http://placehold.it/200x100" alt="Placeholder Image" />
  </div>
</div>

CSS

body {
  margin: 0;
}

#logo {
  width: 100%;
}

#logo, #logo:before, #logo:after {
  float: left;
}

#logo:before, #logo:after {
  content: '';
  width: 50%;
  min-height: 100px; /* height of image */
  border-bottom: 1px solid #ccc;
  margin-top: -50px;
}

#logo:before {
  margin-left: -120px;
}

#logo:after {
  margin-right: -120px;
}

#logo img {
  float:left;
  padding: 0 20px;
}

Working demo here.

OR even an example based on display: table, but this goes a bit wonky when resizing.

http://jsbin.com/ITAQitAv/10/edit

Upvotes: 1

hugo der hungrige
hugo der hungrige

Reputation: 12912

This would be one approach:

.hr {
   height: 50px; /* imageheight */
   background: #fff url(http://placekitten.com/100/50) no-repeat  center; 
}     

.hr hr {
   top: 50%; 
   position: relative;
}

<div class="hr"><hr /></div>

This would be another:

.hr2{
  display: block;
  border-top: 2px solid black; 
  height: 2px;
}
.hr2 img {
  display: block;
  margin: auto;
  margin-top: -31px; /*img-height /-2 + height / 2 */ 
  /* adjustments for 'margin' to border */
  padding: 0 20px; 
  background: #fff;
}

<div class="hr2"><img src ="http://placekitten.com/100/60"></div>

Demos: http://plnkr.co/edit/DznVp8qB9Yak8VfHVzsA?p=preview

Upvotes: 0

Related Questions