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

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

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

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

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

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

другим способом было бы центрирование заключительного абзаца:

<p style="text-align:center"><img src="..."/></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).

только если вам нужно поддерживать древние браузеры IE.

современный подход заключается в том, чтобы сделать 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.

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

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

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>

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

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

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

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

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

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

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

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

img {
    display: inline-block
}

на изображении контейнера держа вы можете использовать коробку гибкого трубопровода css3 совершенно для того чтобы центризовать изображение внутрь, и вертикально и горизонтально. Пусть предположим, что у вас есть в качестве держателя изображения: тогда в качестве css вы должны использовать

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

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

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

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

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

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

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

случай inline

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

случае блок

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

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

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

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

да и нет.

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

ссылки

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

еще один способ масштабирования - дисплей это:

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

используйте это для вашего img css

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 admin внутри страниц. Когда мы вставляем изображения в сторону содержимого и хотим выровнять этот центр. Код отображается как:

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

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

статья p img{ маржа:0 авто; дисплей:блок; выравнивание текста:по центру; поплавок:нет; }

надеюсь, что это поможет в этой ситуации.

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

Я думаю, что это способ для центрального изображения в laravel frame работы.