Anavas Anavas - 2 months ago 12
CSS Question

Adding a logo into a header on both sides of the text

I am new to HTML and am creating a website for my family/self project and I am running into a small issue. I am trying to insert a logo inside of a header on both sides of the text. I have been able to get the image on the left side of the text thanks to:

Logo image and H1 heading on the same line

However, I am running into issues putting the image onto the other side of the text.

header.solid
{
border-style: solid;
border-width: 2px;
}

.header img
{
float: left;
width:75px;
height:75px;
}

.header h1
{
position: relative;
top: 0px;
left: 18px;
}


<div class="header">
<header class="solid">
<img src="Pictures/Star_Img.png" alt="star"/>
<h1 style="color:white;" align="center"><b>P &nbsp;R &nbsp;O &nbsp;V &nbsp;E &nbsp; N &nbsp; &nbsp; &nbsp; &nbsp;L &nbsp;E &nbsp;A &nbsp;D &nbsp;E &nbsp;R &nbsp;S &nbsp;H &nbsp;I &nbsp; P</b></h1>
</header>
</div>


Any help is greatly appreciated, apologies if it's a simple fix

EDIT:
Apologies all, when I had posted the code, I had removed the second img tag

Here is what it is currently.

<div class="header">
<header class="solid">
<img class="leftimg" src="Pictures/Star_Img.png" alt="star"/>
<h1 style="color:white;" align="center"><b>TEST</b></h1>
<img class="rightimg" src="Pictures/Star_Img.png" alt="star"/>
</header>
</div>


And the id tags for leftimg and rightimg:

.leftimg
{
float: left;
width:75px;
height:75px;
}

.rightimg
{
float: right;
width:75px;
height:75px;
}


This however, is giving me these results:

http://s1160.photobucket.com/user/WickedSniper03/media/Header_Img_zpsqzve4jf6.png.html

Answer

You can use flexbox to achieve this with the following steps:

  1. Make your header element a flex-container by using the CSS property display: flex;
  2. Once you declare your <header> as a flex-container, the direct
    children, in this case your h1 element and img elements, are now flex items. To align these flex-items you will add the CSS properties justify-content and align-items to your <header> element.

Example:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CODE SNIPPET:

.solid {
  border-style: solid;
  border-width: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img {
  width: 75px;
  height: 75px;
  flex-shrink: 0;
}
header h1 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 15px;
  word-spacing: 35px;
}
@media (max-width: 520px) {
  header h1 {
    font-size: 1em;
  }
}
<header class="solid">
  <img src="http://placehold.it/75x75" alt="star" />
  <h1>Proven Leadership</h1>
  <img src="http://placehold.it/75x75" alt="star" />
</header>


EDIT:

If you are using a star you can take advantage of an SVG, which will save you HTTP requests.

-- SVG taken from IcoMoon Free.

Code Snippet:

.solid {
  border-style: solid;
  border-width: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img {
  width: 75px;
  height: 75px;
  flex-shrink: 0;
}
header h1 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 15px;
  word-spacing: 35px;
}
.icon-star-full {
  color: gold;
  font-size: 4em;
}
#symbols {
  display: none;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
@media (max-width: 520px) {
  header h1 {
    font-size: 1em;
  }
}
<header class="solid">
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <h1>Proven Leadership</h1>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
</header>

<svg id="symbols">
  <symbol id="icon-star-full" viewBox="0 0 32 32">
    <title>star-full</title>
    <path class="path1" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>


NOTES

  • You should use the CSS properties letter-spacing and word-spacing for separation instead of the character entity &nbsp;
  • Do not wrap your <header> in a semantically meaningless <div>, <header> tag by itself is fine.
  • I added a CSS media query to handle h1 font-size on small devices.
  • The SVG alternative saves you HTTP requests and you can also add some animations to it if you like.
  • Do not use the <b> tag since it is just a styling tag, in this case I removed it completely because it is not needed, but when you do need it, you should be using <strong> instead. Here's why.

ADDITIONAL RESOURCE

I have previously posted an answer here explaining justify-content values, which may help you further understand that property, along with additional information on flexbox in the more info section.