Выровнять изображение по центру текста?

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

img {
    text-align: center;
}

Это не будет работать, поскольку 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>

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

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

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

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>

(Вертикальное и горизонтальное выравнивание)

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

<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>

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

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

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

span.centerImage {
     text-align: center;
}

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

Изображение будет в центре. В ответ на ваш вопрос это самый простой и надежный способ центрировать изображения, если вы помните, чтобы применить правило к содержащему изображение span(или div).

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

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

       .parent {
       text-align: center;
   }

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

   Выполнить фрагмент кодаСкрыть результаты

   Развернуть фрагмент

2. Использование marginсобственности

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

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

   Выполнить фрагмент кодаСкрыть результаты

   Развернуть фрагмент

3. Использование positionсобственности

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }

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

   Выполнить фрагмент кодаСкрыть результаты

   Развернуть фрагмент

Первый и второй методы работают только в том случае, если родительский элемент имеет ширину не менее изображения. Когда изображение шире, чем его родитель, изображение не будет оставаться в центре !!!

Но: третий способ - хороший способ для этого!

Вот пример:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

Только если вам нужно поддерживать древние версии 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

text-align:center

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

img {
    display: inline-block
}

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

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

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

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

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

Дело в строке

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

Корпус блока

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

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

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

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

Да и нет.

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

Ссылки

1. Список встроенных элементов
2. Центрирование вещей

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

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

Используйте это для вашего imgCSS:

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

display: blockс margin: 0не работал для меня, ни упаковка с text-align: centerэлементом.

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

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

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

Я обнаружил, что если у меня есть изображение и текст внутри 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

Иногда мы напрямую добавляем контент и изображения на администратора 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;
}

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

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

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

.img-container {
  display: flex;
}

img {
  margin: auto;
}

это сделает центр изображения как вертикально, так и горизонтально