CSS - центрированное изображение и текст под ним - PullRequest
Новая
       2

CSS - центрированное изображение и текст под ним

0 голосов
/ 01 июля 2019

Я хочу отобразить центрированное изображение, а под ним - центрированный и ограниченный текст, ширина которого равна его контейнеру.Я использую: 

<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
    text-align: center;
}
.d2 {
    border: 1px solid red;
    display: inline-block;
}
</style>
</head>
<body>

<div class="d1">
    <img src="smiley.gif"><br>
    <div class="d2">This is some text</div>
</div>

</body>
</html>

Это прекрасно работает, но, как я читал, использование <br> является признаком плохого семантического HTML и его следует избегать.Есть ли способ сделать это без использования <br>?Спасибо

Ответы [ 4 ]

1 голос
/ 01 июля 2019

Flexbox на помощь: 

.d1 {
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.d2 {
    border: 1px solid red;
}

img, .d2{
  margin: 0 auto;
}
<div class="d1">
    <img src="https://placekitten.com/200/300">
    <div class="d2">This is some text</div>
</div>
1 голос
/ 01 июля 2019

Семантически правильным элементом для использования является элемент HTML5 figure (документация здесь ) - это элемент уровня блока, содержащий элемент figcaption и элемент image, содержащиеся в нем.

Figcaption может быть первым дочерним (т.е. перед изображением) или последним дочерним (после изображения), а также является элементом уровня блока и может быть центрирован с помощью css. 

<!DOCTYPE html>
<html>
<head>
<style>
figure {
    text-align: center;
}

figcaption {
 margin-bottom: 10px;
}

</style>
</head>
<body>

<figure>
   <figcaption>This is a fluffy kitten</figcaption>
   <img src="https://cdn.unifiedcommerce.com/content/product/small/30106.jpg" alt="fluffy kitten" width="100">
</figure>

</body>
</html>
0 голосов
/ 01 июля 2019

Вы можете попробовать это. Просто используйте margin для текстового раздела вместо <br> тега.А затем для размещения изображения и текста по центру используйте следующее свойство: 

display: flex;
justify-content: center;
align-items: center;
flex-flow: column;


<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}
.d2 {
    border: 1px solid red;
    margin-top: 5px;
}
</style>
</head>
<body>
<div class="d1">
    <img src="https://www.w3schools.com/howto/img_snow.jpg">
    <div class="d2">This is some text</div>
</div>
</body>
</html>
0 голосов
/ 01 июля 2019

Попробуйте использовать div для вложения вашего изображения. div - это элемент блока, то есть он будет занимать 100% родительской ширины. В вашем случае, если тег img находится внутри div, тогда все содержимое за пределами div будет автоматически находиться в следующей строке. 

img {
  max-width: 100px;
}

.d1 {
  text-align: center;
}

.d2 {
  border: 1px solid red;
  display: inline-block;
}
<div class="d1">
  <div>
    <img src="https://demo-res.cloudinary.com/image/upload/sample.jpg">
  </div>
  <div class="d2">This is some text</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...