Центральное изображение с помощью центра выравнивания текста?

Является ли свойство text-align: center; хорошим способом центрирования изображения с помощью CSS?

img {
    text-align: center;
}

Ответ 1

Это не будет работать, поскольку свойство text-align применяется к блочным контейнерам, а не к встроенным элементам, а img является встроенным элементом. См. спецификацию W3C.

Используйте это вместо:

img.center {
    display: block;
    margin: 0 auto;
}

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

Ответ 2

Это не всегда работает... если это не так, попробуйте:

img {
    display: block;
    margin: 0 auto;
}

Ответ 3

Я наткнулся на этот пост, и он работал для меня:

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

Ответ 4

Другим способом сделать это будет центрирование вмещающего абзаца:

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

Ответ 5

Вы можете сделать:

<center><img src="..." /></center>

Ответ 6

Собственно, единственная проблема с вашим кодом заключается в том, что атрибут text-align применяется к тексту (да, изображениям как текст) внутри тега. Вы хотели бы поместить тег span вокруг изображения и установить его стиль на text-align: center, так как:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

Ответ 7

Существует три способа центрирования элемента, которые я могу предложить:

Использование свойства text-align

    .parent {
    text-align: center;
}

    <div class="parent">
    <img src="https://placehold.it/60/60" />
</div>

Ответ 8

Только если вам нужно поддерживать древние версии Internet Explorer.

Современный подход - сделать margin: 0 auto в вашем CSS.

Пример здесь: http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

Единственная проблема заключается в том, что ширина абзаца должна совпадать с шириной изображения. Если вы не указали ширину абзаца, он не будет работать, потому что он будет принимать 100%, и ваше изображение будет выровнено по левому краю, если, конечно, вы не используете text-align:center.

Попробуйте скрипку и поэкспериментируйте с ней, если хотите.

Ответ 9

Если вы используете класс с изображением, то следующее сделает

class {
    display: block;
    margin: 0 auto;
}

Если вы хотите выровнять по центру только изображение определенного класса, выполните следующие действия:

class img {
    display: block;
    margin: 0 auto;
}

Ответ 10

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

Ответ 11

Просто измените родительское выравнивание :)

Попробуйте это на родительских свойствах:

text-align:center

Ответ 12

Вы можете использовать text-align: center на родителе и изменить img на display: inline-block & rarr; поэтому он ведет себя как текстовый элемент и будет центрирован, если родительский элемент имеет ширину!

img {
    display: inline-block
}

Ответ 13

На контейнере, содержащем изображение, вы можете использовать CSS 3 Flexbox, чтобы идеально центрировать изображение внутри, как по вертикали, так и по горизонтали.

Предположим, у вас есть & lt; div class= "container"> в качестве держателя изображения:

Тогда в качестве CSS вы должны использовать:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

И это сделает весь ваш контент внутри этого div идеально центрированным.

Ответ 14

Если вы хотите установить изображение в качестве фона, у меня есть решение:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

Ответ 15

Центрирование не фонового изображения зависит от того, хотите ли вы отобразить изображение как встроенное (поведение по умолчанию) или элемент блока.

Случай встроенного

Если вы хотите сохранить поведение по умолчанию для свойства CSS отображения изображений, вам нужно будет обернуть изображение в другой элемент блока, для которого необходимо установить text-align: center;

Корпус блока

Если вы хотите рассматривать изображение как отдельный элемент блока, то свойство text-align не имеет смысла, и вы должны сделать это вместо этого:

IMG.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Ответ на ваш вопрос:

Является ли свойство text-align: center; хороший способ центрировать изображение с помощью CSS?

Да и нет.

Да, если изображение является единственным элементом внутри оболочки.
Нет, если в оболочке изображения есть другие элементы, поскольку все дочерние элементы, являющиеся братьями и сестрами изображения, будут наследовать свойство text-align: возможно, вам не понравится этот побочный эффект.

Ссылки

Ответ 16

Я бы использовал div для центрирования изображения. Как в:

<div align="center"><img src="your_image_source"/></div>

Ответ 17

Еще один способ масштабирования - показать его:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It does not matters much if using left and width */
}

Ответ 18

Используйте это для своего img CSS:

img {
  margin-right: auto;
  margin-left: auto;
}

Ответ 19

Самым простым решением, которое я нашел, было добавить это к моему img-элементу:

style="display:block; margin: auto;"

Кажется, мне не нужно добавлять "0" перед "auto", как предлагают другие. Может быть, это правильный путь, но он работает достаточно хорошо для моих целей без "0". По крайней мере, в последних версиях Firefox, Chrome и Edge.

Ответ 20

display: block с margin: 0 не работал у меня, не обертывая с помощью элемента text-align: center.

Это мое решение:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

translateX поддерживается большинством браузеров

Ответ 21

Я обнаружил, что если у меня есть изображение и некоторый текст внутри div, то я могу использовать text-align:center для выравнивания текста и изображения одним махом.

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

Ответ 22

Иногда мы напрямую добавляем контент и изображения на администратора WordPress внутри страниц. Когда мы вставляем изображения в контент и хотим выровнять этот центр. Код отображается как:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

В этом случае вы можете добавить контент CSS следующим образом:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

Ответ 23

Использование:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

Я думаю, что это способ центрировать изображение в рамках Laravel.