header wrapper re-size css

Question

i waited for 7 days to ask this question because i can't ask more question, i want to keep the wrapper in the middle when people re-size the page

header {
    background-image: url("http://lorempixel.com/400/200");
    background-size: 100% 100%;
    height: 100px;
}
#home {
position:absolute;
top:10px;
left:400px;
}

<header>
 <img id="home" src="https://cdn2.iconfinder.com/data/icons/snipicons/5000/home-128.png" alt="home" style="width:75px;height:67px">
</header>

thnx

http://jsfiddle.net/6xaeej5f/ this is example u can see the "home" wrapper in the header keep going to the left when i try to re-size the page i want it to stay in the midle thanks — Heq Dz, Jan 28 '15 at 02:34

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

You could simply add text-align: center to the parent element. The img will respect this because it is inline by default.

Updated Example

header {
    background-image: url("http://lorempixel.com/400/200");
    background-size: 100% 100%;
    height: 100px;
    text-align: center;
}

See this answer for alternative approaches.

edited May 23 '17 at 11:58

Community

1
1

answered Jan 28 '15 at 02:38

Josh Crozier

202,159
50
343
273

thanks for the answer bro, – Heq Dz Jan 28 '15 at 05:18

score 0 · Answer 2 · answered Jan 28 '15 at 02:43

0

That should do it, if all you need is keeping the icon centred all the time you don't really need to absolute position it.

header {
    background-image: url("http://lorempixel.com/400/200");
    background-size: 100% 100%;
    height: 100px;
    text-align: center;
}

#home {
   margin-top: 10px;
}

answered Jan 28 '15 at 02:43

Karim Tarek

599
4
14

no problem, you should mark one as the correct answer though :) – Karim Tarek Jan 28 '15 at 15:07

score 0 · Answer 3 · answered Jan 28 '15 at 03:11

0

try this,

#home {
position:absolute;
top:10px;
left:48%;
}

answered Jan 28 '15 at 03:11

illusionist

7,996
1
46
63

thanks man it's does the same as the other solution ! – Heq Dz Jan 28 '15 at 05:19

header wrapper re-size css

3 Answers3

Linked