Как наложить на отцентрованное изображение текст?

@olegmorales · Регистрация: 01.04.2015

Author24 — интернет-сервис помощи студентам

Как отцентровать картинку ico3.jpg и наложить текст на нее так, чтобы он был почти в самом низу картинки?

HTML5

<body>
        <div class="logo>">
            <img class="icon" src="ico3.jpg"> </img>
            <p class="header"> Текст</p>
        </div>
    </body>

CSS

body {
    background-color: rgb(240,186,86);
}
 
.logo {
    position: relative;
}
 
.icon {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    height: 400px;
    width: 400px;
    border-radius: 200px;
    box-shadow: 7px 7px 5px rgba(0,0,0,0.8);
}
 
.header {
    font-size: 100px;
    font-family: 'Dancing Script';
    margin: auto;
    position: absolute;
    top: 20; left: 0; bottom: 0; right: 0;
}

@Xteda · 01.04.2015, 14:23

Зачем картинку абсолютно позиционировать?

CSS

.logo {
    position: relative;
    height: 400px;
    width: 400px;
    margin: 0 auto;
}
.icon {
    width: 100%;
    border-radius: 50%;
    box-shadow: 7px 7px 5px rgba(0,0,0,0.8);
}
.header {
    font-size: 100px;
    font-family: 'Dancing Script';
    position: absolute;
    bottom: 20px; /*сколько пикселей снизу*/
    left: 0;
}

Не нужно задавать все 4 значения при позиционировании, вы путаете браузер, как он вам разместит объект сверху и снизу на ноль одновременно? Достаточно 2 - горизонталь и вертикаль. На крайняк не используемым значениям задавайте auto (top: auto)

@Давран · 01.04.2015, 15:25

olegmorales, но если так и охота всему прописывать абсолютное позиционирование, используйте

CSS

1	z-index:n;/где n- приоритет. 1 самый малый. /

но тут я согласен с

Сообщение от Xteda

Не нужно задавать все 4 значения при позиционировании

	01.04.2015, 15:25