3

Im looking for help left aligning and vertically aligning a image in this header.

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
* {
  box-sizing: border-box;
}

img {
  float: left;
  vertical-align: middle;
}

.header {
  padding: 5px;
  text-align: center;
  background: #222222;
  color: white;
  font-size: 20px;
}

h2 {
  color: white;
}

title {
  color: white;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #2C2C2C;
}
<div class="header" class="frame">
  <img src="https://i.imgur.com/pZIRNtP.png" class="logo" alt="logo" />
  <h2>This should be center</h2>
</div>

Here is my code for the image (currently its left-aligned but i can't seem to align it vertically. And then it also moves my text to the right when the text should stay in center of div horizontally)

img {
    float:left;
    vertical-align: middle;
}

I basically need the red image to stay the same size, i just need it to be left-aligned (maybe 50px from left) and be vertically aligned with the header div. But i also need the text to stay in the center of the div, vert and horz.

Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48
Warren Breedlove
  • 105
  • 3
  • 8
  • Please update your question so that it shows your relevant code in a [minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve). Let us know [what you have tried so far](https://meta.stackoverflow.com/questions/261592) and what didn't work. – wazz Oct 30 '19 at 03:23
  • so that's mean you want text over the red image? Red image should be align vertical center? The text should be align center both vertical and horizontal? – Hải Bùi Oct 30 '19 at 03:42

1 Answers1

0

One way:

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

.header {
  padding: 5px;
  background: #222222;
  color: white;
  font-size: 20px;
}

h2 {
  color: white;
  text-align: center;
  margin-top: -45px;
}

title {
  color: white;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #2C2C2C;
}
<div class="header" class="frame">
  <img src="https://i.imgur.com/pZIRNtP.png" class="logo" alt="logo" />
  <h2>This should be center</h2>
</div>
wazz
  • 4,953
  • 5
  • 20
  • 34