Блог

Главная - Вопросы по программированию - Выровнять изображение по правому центру html

Выровнять изображение по правому центру html

#html #css

#HTML #css

Вопрос:

Пример того, как это должно выглядеть:

quot;imgquot;

Я получил его только для перехода либо в крайнее правое, либо в крайнее левое. Есть ли какой-нибудь простой способ поместить его между центром и справа?

редактировать: код (поместить код в https://hasteb.in/iyireyeb.xml так что я могу его отредактировать)

 .row {
    display: table-cell;
    vertical-align: middle;
}

* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}  
 <div class="row">
  <div class="column left" style="background-color:#27272e;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column middle" style="background-color:#27272e;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column right" style="background-color:#27272e;">
    <img src="bg.jpg" alt="img">
  </div>
</div>

Комментарии:

1. Пожалуйста, предоставьте свой код, если вы хотите получить адаптированную справку.

2. Ваша проблема решена?

Ответ №1:

Основываясь на вашем коде, я просто добавил CSS ниже, чтобы правильно настроить размер вашего изображения в правом столбце:

 .right{
  display:flex;
}
.right img{
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

ДЕМОНСТРАЦИЯ

 .row {
    display: table-cell;
    vertical-align: middle;
}

* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.right{
  display:flex;
}
.right img{
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}  
 <div class="row">
  <div class="column left" style="background-color:#27272e;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column middle" style="background-color:#27272e;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column right" style="background-color:#27272e;">
    <img src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" alt="img">
  </div>
</div>

Ответ №2:

Можете ли вы попробовать это:

 left: 75%;
transform: translateX(-50%);

Комментарии:

1. А также вам нужно установить для свойства position изображения значение absolute, а его родительское значение должно быть position relative . .родительский элемент{ позиция: относительная; } .дочерний элемент{ цвет фона: зеленый; высота: 100 пикселей; ширина: 100 пикселей; позиция: абсолютная; слева: 75%; преобразование: translateX(-50%); }