Wyśrodkowanie napisu

pytanie zadane 25 maja 2018 w HTML i CSS przez Newaz Użytkownik (880 p.)

Mam diva o szerokości 100% którego tło jest zdjęciem, i mam problem z wyśrodkowaniem napisu, coś pokombinowałem ale chyba działa tylko na szerokości monitora 1600px. Może ktoś mi pomóc i napisać jak to zrobić?

Chodzi mi mniej więcej o coś takiego. https://imgur.com/ID59P5p

kod -> https://codepen.io/anon/pen/BxgXbJ

2 odpowiedzi

odpowiedź 25 maja 2018 przez shotokan Nałogowiec (39,660 p.)

Aby wyśrodkować tekst wystarczy użyć text-align:center. Nie stosuje się na siłę pozycji absolutnej oraz ustawiania, gdzie konkretnie ma się znajdować ten tekst.
W Twoim przypadku oprócz szerokości diva dodałeś jeszcze szerokość do h2 oraz p, niepotrzebnie. Zostaw tylko tak i wszystko będzie w porządku:

.photo h2{
    font-size: 36px;
    font-weight: 300;
    text-align: center;
    color: #fefefe;
}
.photo p{
    font-size: 21px;
    text-align: center;
    color: #fefefe;
}

komentarz 25 maja 2018 przez Shaoi Mądrala (7,020 p.)
edycja 25 maja 2018 przez Shaoi

.photo h2 {
    font-size: 36px;
    font-weight: 300;
    text-align: center;
    color: #fefefe;
}

.photo p {
    font-size: 21px;
    text-align: center;
    color: #fefefe;
}

Zbędne, więc do usunięcia.

komentarz 25 maja 2018 przez Newaz Użytkownik (880 p.)

No w sumie racja, dzięki :D. A wiesz może jeszcze jak ustawić żeby napis był na środku wysokości tła?

komentarz 25 maja 2018 przez PolYGlok Pasjonat (19,450 p.)

margin: auto;

ps. F12 na to zdjecie i Ci pokaże samo.

komentarz 25 maja 2018 przez shotokan Nałogowiec (39,660 p.)

margin:auto ma zastosowanie do elementów blokowych, a tekst jest elementem liniowym, poza tym ten styl daje na środku, ale szerokości elementu a nie wysokości.
Poszukaj, niedawno ktoś na tym forum pytał o to samo. :)