Место титра в пределах границы изображения

Here is my work so far.Место титра в пределах границы изображения

Как вы можете видеть, у меня есть твердое вещество белого цвета границы и есть подпись под границей. Тем не менее, я хочу, чтобы подпись была под изображением, но внутри границы, и была сосредоточена. Вот мой код:

.img-set { 
display: block; 
margin: 0 auto; 
width: 700px; 
border: 30px solid white; 
} 
.caption{ 
align-text: center; 
margin: 0 auto; 
font-size: 19px; 
}

HTML:

<div align="center"> 
    <img src="https://upload.wikimedia. 
org/wikipedia/commons/b/bf/Mikhail_Tal_1982.jpg" class="img-set"> 
    <div class="caption"> 
    Tal smoking a cigarette 
    </div> 
</div>

источник

2016-02-13 Struggling

Это [это] (https://jsfiddle.net/okqd4496/), что вы пытаетесь сделать? –

Вы не можете добавить любой контент на границе, но here is my solution on CodePen (обратите внимание, что я также сделал некоторые полезные изменения в свой код, чтобы он соответствует лучше к стандарты).

Решение объяснил

Я удалил границы с изображения. Затем я обернул изображение в элементе div (img-container).

Я установил цвет фона контейнера в белый цвет и установил прописку 30 пикселей. Таким образом, я достиг визуальной границы 30 пикселей для изображения, которое находится внутри этого контейнера.

.image-container { 
    background-color: #ffffff; 
    display: inline-block; 
    padding: 30px; 
}

Внутри DIV, после того, как изображения (img-set), есть также подпись. Заметьте, что я добавил margin-bottom: 30px; к изображению, так что он выглядит лучше.

источник

2016-02-13 00:48:21

Я обновил URL CodePen до фиксированного. Жаль, что я сделал ошибку. Пожалуйста, верните назад. –

Эй, Ариэль, спасибо. но почему класс рисунка-caption пуст? и почему вы добавили его в мой заголовок в html? Кроме того, что означает встроенный блок? и как он отличается от просто блока? – Struggling

Hello @Nisha Shlaymoon. Вы можете добавить стиль к рисунку с помощью CSS, я этого не делал, потому что это не было важно для решения :). О встроенном блоке, читайте больше об этом здесь - http://www.w3schools.com/cssref/pr_class_display.asp Как правило, я использовал его, потому что я хотел, чтобы ширина div контейнера была такой же широкой, как и контент (который это изображение в этом случае). –

Исправлен код. Граница должна быть для всех элементов внутри (в этом случае изображение и подпись)

HTML:

<head> 
    </head> 

    <body> 
    <h1 align="center">Mikhael Tal</h1> 
    <h5 align="center">The magician from Riga</h5> 
    <figure class="img-set"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Mikhail_Tal_1982.jpg"> 
     <figcaption align="center">Mikhael Tal smoking a cigarette</figcaption> 
    </figure> 
    </body> 


    </html>

CSS:

h1 { 
    font-size: 100px; 
    font-family: italic; 
} 

h5 { 
    font-size: 45px; 
    font-family: italic; 
    font-style: italic; 
} 

body { 
    background-color: lightblue; 
} 

.img-set { 
    border: 30px solid white; 
    width: 700px; 

    margin: 0 auto; 
} 

.img-set img { 
    display: block; 
    width: 100%; 
} 

figcaption{ 
    background-color: #FFF; 
    padding-top: 30px; 
}

(расстояние добавлено)

источник

2016-02-13 00:54:17

Место титра в пределах границы изображения

ответ

Смежные вопросы