it-swarm.com.ru

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

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

img {
    text-align: center;
}
469
Web_Designer

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

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

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

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

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

Наткнулся этот пост и у меня это сработало

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

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

80
Shai Reznik - HiRez.io

Еще один способ сделать это центрирование абзаца:

<p style="text-align:center"><img src="..."/></p>
47
EssamSoft

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

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

14
Dimitris Maniatis

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

span.centerImage {
     text-align: center;
}
<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

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

12
Code Monkey

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

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

8
Ray Toal

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

  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>

8
Amin Fazlali

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

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

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

class img {
    display: block;
    margin: 0 auto;
}
6
Baig
img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }
6
Dream Hunter

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

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

3
Mo.

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

img {
    display: inline-block
}
3
Doml The-Bread

На контейнере, содержащем изображение. Вы можете использовать css3 flex box для идеального центрирования изображения внутри, как по вертикали, так и по горизонтали . Предположим, у вас есть держатель изображения: Затем как css. Вы должны использовать 

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

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

3
Santoni

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

Дело в строке

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

Корпус блока

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

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

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

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

И да и нет.

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

Рекомендации

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

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

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

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

<div align="center"><img src="your_image_source"/></div>
2
Akintunde-Rotimi

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

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 */
}
1
Kishore Banala

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

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

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

0
teran teshara

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

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

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

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

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

0
Sangrai

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

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

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

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

0
OverCoder

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

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

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

0
Panu Logic

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

0
MadPhysicist