Witam,

Na stronie umieściłem banner, któremu nadałem width 100%, aby był responsywny.
Chcę teraz umieścić na niego obrazek, który ma być na jego środku, jak to zrobić ? Jak powinna wyglądać struktura i jaką pozycję nadać temu elementowi w css ?

http://prntscr.com/354k1x

Na bannerze:
text-align:center;

Na elemencie:
display:inline-block lub inline (ewentualnie, zależy jakiego typu jest element).

A jeśli na banner miałbym wstawić obrazek ?

Tylko: text-align: center; dla bannera.

no ok, a jak będę chciał na tym responsywnym bannerze o szerokości 100% umieścić jakiś tekst bez wyśrodkowywania ?

position: absolute lub position:relative;
left i top w %, px, cm, itp.

tylko że wtedy będę ustalał pozycję względem 0 0 strony, a nie elementu?
Wtedy podając tą absolutną pozycję podawać w % ?

Musisz odpowiednio przemyśleć strukturę strony, zawsze możesz użyć margin:auto; co też wyśrodkuje Ci element. Osobiście wykonał bym to w sposób taki że ustalił bym diva dla którego baner bym wrzucał jako tło i jakiś element na środku wycentrował. Pisząc odpowiednio CSSa i strukturę HTMLa da się to uzyskać w ten sposób bez większego problem.

Zawsze tak robiłem, ale teraz nadając width 100% niestety wszystko się sypie...

Jeśli nie nadasz banerowi position, a element będziesz pozycjonował absolutnie, to wtedy względem rodzica bannera.


Zależy co chcesz osiągnąć. Piszesz o responsywności, więc raczej w procentach, chyba, że będziesz robił skalowanie i pozycjonowanie elementów w JS.

Zrobiłem strukturę:

<section id="banner">
<img src="images/header.png" width="100%">
<h1>ALALA</h1>
</img>
</section>

I niestety H1 nie chce pozycjonować się względem bannera ;(

Jaki styl ma #banner i jaki H1?

#banner img{
margin-top: 2%;
}

#banner h1{
position:absolute;
top: 10px;
}


a sekcja #banner nie ma żadnego.

Pisałem wyżej jaki będzie efekt jeśli nie nadasz bannerowi pozycji, a będziesz elementy wewnątrz pozycjonował absolutnie.

Troche Cię nie rozumiem.. przecież nie pozycjonuję bannera( usunałem to margin-top).
A elementowi nadaję absolute i nadal nie działa, bo pozycjonuje się względem strony, a nie bannera..

Nadaj #banner position:relative;

Podstawy:
http://kurs.browsehappy.pl/CSS/Position

Nadałem, ale nadal element nie ustawia się wewnątrz bannera..

[HTML] pobierz, plaintext 
#banner{
    position: relative;
}
 
#banner h1{
    position:absolute;
    top: 10px;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
    <section id="banner"> 
        <img src="images/header.png" width="100%">
            <h1>ZMIEŃ SIEBIE</h1>
        </img>
    </section>
[HTML] pobierz, plaintext 

http://prntscr.com/356mfy

Czyli w czym może być problem, że w moim kodzie to nie działa ?

Pod jaką przeglądarką testujesz?

Pod chrome...

Jeszcze raz wrzucę kod:

[HTML] pobierz, plaintext 
  <section id="banner"> 
        <img src="images/header.png" width="100%">
            <h1>ZMIEŃ SIEBIE</h1>
        </img>
    </section>
 
#banner{
    position: relative;
}
 
#banner h1{
   position: absolute;
    top: 100px;
    left: 100px;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  <section id="banner"> 
        <img src="images/header.png" width="100%"/>
        <h1>ZMIEŃ SIEBIE</h1>
    </section>
 
[HTML] pobierz, plaintext 

Niestety nadal pozycjonuje względem punktu 0,0 przeglądarki...
Tego nie mogę dopuścićw responsywnej stronie.

Nie ma jakichś innych sposobów aby umieścić na bannerze różnych rzeczy ?
Tak, aby to banner był tłem dla tych elementów, przy czym miał width 100% ?

Jaka wersja Chrome?

[HTML] pobierz, plaintext 
#banner{
    position: relative;
    width: 100%;
 
}
#baner img { width: 100%; }
 
#banner h1{
   position: absolute;
    top: 40%;
    left: 40%;
}
  <section id="banner"> 
        <img src="https://www.google.pl/images/srpr/logo11w.png" width="100%"/>
        <h1>ZMIEŃ SIEBIE</h1>
    </section>
 
 
[HTML] pobierz, plaintext