Css выравнивание картинки по центру: Как выровнять картинку по центру с помощью CSS

Содержание

html — Выравнивание картинок в 1 ряд по горизонтали с переносами

Нужно выровнять изображения в 1 ряд, чтобы было все в ровень. А то получается что верхний ряд съезжает вниз из-за переносов <br>. Второй и последующие ряды отображаются нормально как надо. Правки могу внести только в CSS.

.pic {
  display: block
}
.pic img {
  float: left;
  margin: 0 5px 10px
}

<div>
  <a href="/"><img src="https://neomaks.ru/lenta/walking_dead_9.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Sharp-Objects.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/boites.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/AHS_S8_Apocalypse.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks. ru/lenta/Preacher.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Salvation.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/elementary-6-sezon-2018.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/LostInSpace_2018.jpg" alt="" title=""></a>
</div>

html
css
вёрстка

.pic {
  display: flex;
  flex-wrap: wrap;
}

.pic img {
  margin: 0 5px 10px
}

<div>
  <a href="/"><img src="https://neomaks.ru/lenta/walking_dead_9.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Sharp-Objects.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.  ru/lenta/boites.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/AHS_S8_Apocalypse.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Preacher.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Salvation.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/elementary-6-sezon-2018.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/LostInSpace_2018.jpg" alt="" title=""></a>
</div>

Но ранее вы писали, что у вас текст сверху должен быть, в данном методе текст будет строго справа или слева, смотря в какое место он пишется. Если до img — тогда слева, после — справа!

 .pic {
  display: flex;
  flex-wrap: wrap;
}

. pic img {
  display: block;
  position: relative;
  margin: 0 5px 10px
}

<div>
  <a href="/"><img src="https://neomaks.ru/lenta/walking_dead_9.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Sharp-Objects.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/boites.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/AHS_S8_Apocalypse.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Preacher.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Salvation.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/elementary-6-sezon-2018.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.  ru/lenta/LostInSpace_2018.jpg" alt="" title=""></a>
</div>

.pic {
  display: inline-block;
  float: left;
}

.pic > br {
  display: none;
}

.pic {
  margin: 0 5px 10px;
}

<div>
  <a href="/"><img src="https://neomaks.ru/lenta/walking_dead_9.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Sharp-Objects.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/boites.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/AHS_S8_Apocalypse.jpg" alt="" title=""></a>
  <div>
    Какой-то<br>
    Текст
  </div>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Preacher.  jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/Salvation.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/elementary-6-sezon-2018.jpg" alt="" title=""></a>
  <br>
  <a href="/"><img src="https://neomaks.ru/lenta/LostInSpace_2018.jpg" alt="" title=""></a>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Выравнивание по центру картинки

Вопрос задан 6 лет 6 месяцев назад

Изменён 6 лет 4 месяца назад

Просмотрен 187 раз

Есть блок.

.photo{
    border:1px solid #e3e3e3;
    text-align:center;
    width:530px;
    height:458px;
}
    
.photo img{
    max-width:500px;
    max-height:400px;
}

<div>
  <a href="/<?=$gallery[0]->img?>" data-lightbox="roadtrip" title="my caption">
    <img src="/<?=$gallery[0]->img?>" alt="<?=$product->title?>">
  </a>
</div>

Но картинка прижимается к верху.

Как сделать так что бы она выравнивалась по центру? Как например в таблице

<td valign="middle">
    Фото
</td>

html
css

.photo {
  border: 1px solid #e3e3e3;
  text-align: center;
  width: 530px;
  height: 458px;
}
.photo:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.photo img {
  max-width: 500px;
  max-height: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}

<div>
  <a href="/<?=$gallery[0]->img?>" data-lightbox="roadtrip" title="my caption">
<img src="/<?=$gallery[0]->img?>" alt="<?=$product->title?>">
</a>
</div>

Попробуйте так:

.photo {
  border: 1px solid #e3e3e3;
  display: table-cell;
  height: 458px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 530px;
}
. photo img{
  max-width:500px;
  max-height:400px;
}

.photo {
    position: relative;
    left: 50%;
    float: left;
}
.photo img {
    position: relative;
    right: 50%;
}

Ещё проще и понятней использовать flexbox

для выравнивания.

1й вариант

.photo {
  display: flex;
  /* Горизонтальное выравнивание по центру */
  align-items: center;
  /* Вертикальное выравнивание по центру */
  justify-content: center;
}

2й вариант

.photo {
  display: flex;
}
.photo > a {
  /* выравнивание и по горизонтали, и по вертикали */
  /* если надо только по вертикали то задайте margin: auto 0; */
  margin: auto;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Выровнять текст по центру и выровнять изображение по правому краю в ячейке таблицы

спросил 1 год, 2 месяца назад

Изменено 1 год, 2 месяца назад

Просмотрено 1к раз

Я хочу выровнять изображение в ячейке по правому краю и оставить текст по центру ячейки. Я использую float:right на изображении, которое отображает его правильно, однако оно смещает текст влево по ширине изображения, поэтому он больше не центрируется. Есть ли способ сохранить текст по центру?

 <таблица>
  
   текст

HTML
CSS

Вы можете добавить положение относительно td и абсолютное положение к изображению, а затем установить righ=0 в изображении

<тд> текст

png" />

Кроме того, если вы хотите, чтобы ваша таблица стала 100%, вы должны установить стиль в таблице, а не в ячейке.

Имейте в виду, что ваш текст может быть под изображением. Вы можете поместить текст поверх изображения, если хотите избежать этого, или использовать полупрозрачное изображение.

Я бы обернул ваш текст и ваше изображение в div, которому назначен flex. Затем вы можете использовать flex-grow: 1; .

 тд {
  ширина: 50%;
}
.tdflex {
  дисплей: гибкий;
}
.текст {
  гибкий рост: 1;
  выравнивание текста: по центру;
}

 <граница таблицы>

<тд> <дел>

текст

<дел>

Обновление

 td {
  ширина: 200 пикселей;
  высота: 50 пикселей;
}
.tdpos {
  положение: родственник;
}
.tdpos изображение {
  положение: абсолютное;
  верх:0;
  справа: 0;
}
. текст {
  верхнее поле: -24px;
  фон: серый;
  выравнивание текста: по центру;
}

 <граница таблицы>
  
   <тд>
     <дел>
       текст

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — Центральное изображение в таблице td в CSS

спросил 11 лет, 5 месяцев назад

Изменено 2 года, 1 месяц назад

Просмотрено 455 тысяч раз

Я пытался выровнять изображение по центру стола td. Это работало с установкой margin-left на определенное значение, но это также увеличило размер td, и это не совсем то, что я хотел

Есть ли какие-либо эффективные способы сделать это? Я использовал проценты для высоты и ширины стола.

HTML
CSS

или через css, что более предпочтительно…

Простой способ сделать это для html5 в css:

 td img{
    дисплей: блок;
    поле слева: авто;
    поле справа: авто;
}

У меня сработало отлично.

Центрировать div внутри td с помощью margin , хитрость заключается в том, чтобы сделать ширину div такой же, как ширина изображения.

 <тд>
  <дел>