Центрировать HTML изображений

Question

Я хочу, чтобы два изображения были в центре. См. https://prnt.sc/qxaapc для визуального представления того, что я хочу.

Код:

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 28%;
  height: 28%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="row" align="center">
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
  </div>
</div>

Answer 1

Вместо использования поплавков лучше использовать flexbox. См. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ для всех различных опций, которые у вас есть с этим.

Рабочий пример:

/* General */
* {
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}


/* Specific */
.row {
  display: flex;
  justify-content: center;
}

.column {
  flex: 0 1 28%;
  padding: 5px;
}

<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  </div>

</div>

Небольшой совет: старайтесь избегать встроенных стилей, например style = "width: 100%" на изображениях.

Answer 2

попробуйте

.row
{
  display: flex;
  justify-content: center;
}

Answer 3

Используйте display: inline-block; вместо float:left в вашем .column классе и используйте width:100% для .row класса

* {
  box-sizing: border-box;
}
.row{
width: 100%;
}

.column {
  display: inline-block;
  width: 28%;
  height: 28%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="row" align="center">
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
  </div>
</div>

Answer 4

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 28%;
  height: 28%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row {
  display: flex;
  justify-content: center
}

<div class="row" align="center">
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
  </div>
</div>

Я просто установил для .row display: flex; justify-content:center; style

Answer 5

class = "column" для внутренних секций приводит к тому, что изображения появляются рядом друг с другом.

Эти 2 изменения могут заставить изображения появляться одно под другим, в выравнивание по центру:

1. Укажите 'align = center' для секции верхнего уровня.
2. Укажите 'class = row' для секций, которые показывают изображения.

Вот рабочее решение:

<div align="center">
    <div class="row">
        <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt="Snow" style="width:300px">
        </div>
    <div class="row">
        <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" style="width:300px">
    </div>
</div>

Answer 6

Попробуйте с этим:

.column {
  width: 28%;
  height: 28%;
  padding: 5px;
  display: inline-block;
  margin-right: 15px;
  text-align: left;
}