CSS: What's a better way to overlay an image over a div border?-CodePudding

I have a div with a solid border and want to overlay a centered logo over top of it.

Right now I have a solution that just embeds the image on the page and then moves it into position with: 'margin-top:-13px;text-align:center;'

https://jsfiddle.net/christophera/43Ljmoh9/

.inside-article {
  margin-top:20px;
  border-top-style: solid;
  border-top-width: 5px;
  border-top-color: red;
}
.pos-logo {
  margin-top:-13px;
  text-align:center;
  }

<div class="inside-article">
<div class="pos-logo">
<img style="width:120px;"  src="https://test.consumer.press/img/consumer-press.svg" />
</div>
</div>

I've tested with chrome and edge desktops and it works... I'd have to adjust the margin-top to work on my phone using @media... But... well, is this a good way to do this, or do you have a better method?

thanks,

Chris

CodePudding user response：

You could use pseudo element for border and it is 100% responsive.

set its position to absolute and top:50% to stay in middle and transform:translateY(-50%) to center its position and set z-index:-1 to go behind the layer

Make sure to set vertical-align: middle for the img so that it stays in mid line

.inside-article {
  margin-top:20px;
  position: relative;
}
.inside-article::before {
  content: '';
  border-top-style: solid;
  border-top-width: 5px;
  border-top-color: red;
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}
.pos-logo {
  text-align:center;
  }
  img{vertical-align: middle;}

<div class="inside-article">
<div class="pos-logo">
<img style="width:120px;"  src="https://test.consumer.press/img/consumer-press.svg" />
</div>
</div>

CodePudding user response：

You can just change margin-top: -13px with the transform: translateY(-50%); and you will get exactly the same result, and you won't need to calculate the negative pixels.

CodePudding user response：

If you use display:flex in your container, you'll be able to centre your image in the middle of it, regardless of its dimensions.

Use the :before pseudoselector on your image container to draw your line, and position it absolutely with percentages – this means it'll also always be in the middle if your div changes its height.

.inside-article {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.inside-article .pos-logo img {
  display: block;
  width: 120px;
}

.inside-article .pos-logo:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 5px solid red;
  width: 100%;
  transform: translateY(-50%);
  z-index: -1;
}

<div class="inside-article">
  <div class="pos-logo">
    <img src="https://test.consumer.press/img/consumer-press.svg" />
  </div>
</div>

CodePudding user response：

This is simple when you use the <fieldset> and <legend> elements.

.inside-article {
  border: none;
  border-top: 5px solid red;
}

.pos-logo {
  margin: auto;
}

.logo-image {
  width: 120px;
}

<fieldset class="inside-article">
  <legend class="pos-logo">
    <img class="logo-image" src="https://test.consumer.press/img/consumer-press.svg" />
  </legend>
</fieldset>

NOTE: fieldset elements are intended for form elements and labels, so if you really need to match the standards, this solution is not recommended.

But this code is the shortest above all, and that's something :)