Aligning HTML headings with image using CSS - html

Question

I'm new to CSS, and I'm experiencing a lot of difficulty with aligning things.
At the moment, I have <h1> and <h2> text and an image. I'd like the <h2> text to reside right beneath the <h1> text, and I'd like this <h1>-<h2> block to be positioned in the top-left corner of the screen. I'd like the image to be inline with the text, but centered in the middle of the screen. This is what I have so far:
.header img {
width: 525px;
height: 188px;
text-align: center;
position: relative:
}
.header h1{
position: absolute;
left: 15px;
top: 35px;
font-family: 'Tehuti';
font-size: 3em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
}
.header h2{
font-family: 'Tehuti';
font-size: 3em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
background-color: rgba(37, 39, 37, 0.07);
float: left;
}
I can't for the life of me get this to work. Any help would be greatly appreciated.

Answer 1

Since you are using an absolute positioned layout your could absolute position your <img> to the center of the screen with these styles:
.header img {
position: absolute;
left:50%;
transform:translateX(-50%);
}
See this fiddle for a demo (fullscreen)

Answer 2

1: text-align aligned the content inside the element so setting text-align: center to .header img will no center align the img.
2: the h1 and h2 has by default display: block so that is why it place one bellow the other, set display: inline-block or inline to placed next to each other.
Now you can float: left h1 and h2 set text-align: center to div .header but you will note that the img will not centered in the middle of the screen
So do this
h1, h2{
display: inline-block;
font-family: 'Tehuti';
font-size: 1em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
}
.header h2{
background-color: rgba(37, 39, 37, 0.07);
}
.header{
text-align: center;
}
.header img {
width: 100px;
height: 100px;
}
.h-content{
position: absolute; /*If you want it to be always on the top-left of the screen, even when scrolls set fixed*/
left: 15px;
top: 35px;
}
<div class="header">
<div class="h-content">
<h1>I'm a h1</h1>
<h2>I'm a h2</h2>
</div>
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt=""/>
</div>
I hope this help you