Центральне зображення за допомогою центру вирівнювання тексту?

Чи властивість 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%;
}

І це зробить весь ваш вміст у цій диві ідеально центрованою.

Найпростіше рішення, яке я знайшов, було додати це до свого елемента img:

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

Здається, мені не потрібно додавати "0" перед "авто", як пропонують інші. Можливо, це правильний шлях, але він працює досить добре для моїх цілей і без "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;
}

Відповідь на ваше запитання:

Чи вирівнюється текст властивості: центр; хороший спосіб центрувати зображення за допомогою 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 підтримується більшістю браузерів

Я виявив, що якщо у мене є зображення та текст у тексті a 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;
}

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