Як вертикально вирівняти зображення всередині поділки


1456

Як ви можете вирівняти зображення всередині вмісту div?

Приклад

У моєму прикладі, я повинен вертикально відцентрувати <img>в <div>с class ="frame«:

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frameВисота зображення фіксована, а висота зображення невідома. Я можу додати нові елементи, .frameякщо це єдине рішення. Я намагаюся зробити це в Internet Explorer 7 і пізніших версіях, WebKit, Gecko.

Дивіться jsfiddle тут .

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>


3
Привіт, вибачте, але я не погоджуюсь з тим, що використання помічника тут є найбільш цінним рішенням. Але це не єдиний спосіб. Інші ж підтримуються браузерами. Пропоную тут рішення вниз stackoverflow.com/a/43308414/7733724 та W3C.org про інформацію. Ви могли перевірити. Ура
Сем

Читання статті про речі з центрування
QMaster

Ідеальний посібник для вирівнювання css-tricks.com/centering-css-complete-guide
Майкл Юрін

Відповіді:


2128

Єдине (і кращий крос-браузер) спосіб , як я знаю , є використання inline-blockпомічника з height: 100%і vertical-align: middleна обох елементах.

Тож є рішення: http://jsfiddle.net/kizu/4RPFa/4570/

Або якщо ви не хочете мати додатковий елемент у сучасних браузерах і не проти використовувати вирази Internet Explorer, ви можете використовувати псевдоелемент і додати його до Internet Explorer за допомогою зручного виразу, який працює лише один раз на кожен елемент , тому не буде жодних проблем із ефективністю:

Рішення з Internet Explorer :beforeі expression()для нього: http://jsfiddle.net/kizu/4RPFa/4571/


Як це працює:

  1. Якщо у вас є два inline-blockелементи поруч, ви можете вирівняти один одного на стороні, тож vertical-align: middleви отримаєте щось подібне:

    Два вирівняні блоки

  2. Якщо у вас є блок з фіксованою висотою (в px, emабо інший абсолютний одиниці), ви можете встановити висоту внутрішніх блоків %.

  3. Отже, додавання одного inline-blockз height: 100%блоку з фіксованою висотою дозволить вирівняти інший inline-blockелемент у ньому ( <img/>у вашому випадку) вертикально біля нього.

2
Ви можете самі переконатися : jsfiddle.net/kizu/Pw9NL - лише вбудовані коробки не створюють коробку, але всі інші випадки справні.
kizu

3
Дуже гарна відповідь. Я боровся з проміжками між інлайн елементів блоку, тобто між .frameі .frame:before. Рішення , запропоноване тут , щоб додати margin-left: -4pxдо .frame. Сподіваюсь, це допомагає.
Мік

111
ЗАБЕЗПЕЧУЙТЕ, що: <img src=""/>НЕ знаходиться всередині <span></span>доданого помічника. Це зовні. Я майже витягнув кожну пасмо свого волосся, не усвідомлюючи цього.
ryan

50
Схоже, вам також потрібно додати "white-space: nowrap;" до кадру, або ви зіткнетеся з проблемою, якщо між зображенням і помічником буде розрив рядка. Мені знадобилася година, чому це рішення не працювало для мене.
juminoz

2
У моєму випадку моє зображення мала максимальну висоту та максимальну ширину, встановлену на 100%, щоб зображення масштабувало контейнер, і цей метод не працював. Моє рішення полягало в тому, щоб змінити ці значення на 90% (що в моєму випадку було нормально; в іншій ситуації вам може знадобитися відповідно масштабувати контейнер), а також додати помічника на іншу сторону зображення, щоб накладка залишалася навіть на обидві сторони.
Ерік Дубе

513

Це може бути корисно:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

74
Якщо ви також бажаєте горизонтально вирівняти зображення, додайте ліворуч: 0; справа: 0; to img
jameskind

це один не працює в IE10? Я якось використовую це в усьому місці
Макс Ярі

Також працює (для мене) з контейнером Divposition:fixed;
PJ Brunet,

1
Найпростіше та найчистіше рішення завдяки!
KDT

Дякую! Працювали для мене !!
Олександр Малигін

486

Рішення matejkramny - це гарний початок, але негабаритні зображення мають неправильне співвідношення.

Ось моя виделка:

Демонстрація: https://jsbin.com/lidebapomi/edit?html,css,output

попередній перегляд


HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Будь-який спосіб адаптувати це, щоб ви могли збільшити масштаб зображення, скажімо, 2х, і воно все одно залишатиметься в центрі горизонтально і вертикально?
Джастін

Якщо ми хочемо, щоб він працював для вертикального вирівнювання дна замість середини, які коди слід змінити?
бобо

1
@bobo просто видаліть top: 0;. Це призводить до того, що bottom: 0;його застосовують лише вертикально.
jomo

Найкраща відповідь!
user315338

276

Трирядкове рішення:

position: relative;
top: 50%;
transform: translateY(-50%);

Це стосується будь-чого.

Від сюди .


Префікси: -ms- або -webkit- (до перетворення). w3schools.com/cssref/css3_pr_transform.asp
Хорхе Орпінель,

3
Префікси для IE9, але взагалі не працюють в IE8 і нижче: caniuse.com/#search=transform Але моя думка: IE8
Reign.85

Ніхто не помітив, що станеться, коли дитина, що має центр, вище екрана пристрою, а батько - перша дитина в DOM ...?
тао

3
Гарний, коли ви не можете використовувати, position: absolute;тому що вам потрібна ширина течії.
plong0

2
Найкраще рішення досі, навіть краще, ніж flexbox, з підтримкою більшості браузерів сучасних та старих. Підтвердьте це, будь ласка
albanx

141

Чисте рішення CSS:

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}

img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Ключові речі

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

Будь ласка, дозвольте мені звернутися до посібника, який навіть працює для IE5 (вирахувавши з того, що я читав у публікації) webmasterworld.com/css/3350566.htm
Matej

Це рішення є гарним початком, але великі зображення отримують розмір із неправильним співвідношенням . Будь ласка, дивіться мою відповідь.
jomo

@ HansWürstchen Так, але справа в тому, щоб переконатися в тому, чи він стає надмірним - це вибір дизайну. Додавання більше css = більше безладу :)
Matej

1
@matejkramny це не стає великим. якщо зображення є надто великим, він має неправильне співвідношення. це означає, що вона розтягнута у висоту і не виглядає належним чином.
jomo

✔ Нічого так, це працює з переповненими зображеннями (більшими за обгорткові), прийнята відповідь не відповідає.
Седрік Райхенбах

120

Для більш сучасного рішення, і якщо немає необхідності підтримувати застарілі браузери, ви можете зробити це:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: auto; */
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Ось ручка: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


3
Це особливо корисно, якщо висота контейнера не встановлена
Дейв Барнетт

або align-selfдля окремих предметів
Майкл

Проблема align-selfполягає в тому, що гнучкі елементи розтягнуть висоту батьківського контейнера.
Рікардо

101

Таким чином ви можете центрувати зображення вертикально ( демонстраційно ):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

4
Як не дивно, я не міг отримати прийняту відповідь, щоб працювати у своїй ситуації (я також обрізав зображення із переповненням: приховано). Однак це працювало переважно.
Лука Спіллер

3
Я протестував це лише в Chrome, але висота рядка є ключовою. Я ставлю атрибут вертикального вирівнювання на div, а не на img, хоча мій img знаходиться всередині якоря (<a/>).
Ціна Тодда

1
Так, набагато простіше, ніж прийняте рішення, і працює прекрасно. Я знайшов це рішення і в jsfiddle.
vdboor

1
Якщо ви знаєте, на яку висоту потрібно задовольнити, це працює досить добре
KrekkieD

З мого досвіду це рішення працює лише font-size: 0для div. Для досить великих контейнерів ви можете пропустити його, але якщо ваш div100px, а img - 80px, він буде на кілька пікселів нижче.
alTus

38

Також ви можете використовувати Flexbox для досягнення правильного результату:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>


28

Існує надзвичайно просте рішення з флексбоком!

.frame {
    display: flex;
    align-items: center;
}

5
Так, але навряд чи це можна побачити у всіх відповідях. Я намагався виділити це просто і чітко, оскільки це набагато простіше рішення, ніж усі інші відповіді.
BBlackwo

Це найкраща відповідь, яка теж працювала на мене. Але в моєму випадку "кадр-флекс" працював для мене краще. а для зображення всередині нього я додав: "вертикальне вирівнювання: середина".
Софі Куперман

22

Ви можете спробувати встановити CSS PI на display: table-cell; vertical-align: middle;


Я бачив різні методи, але цей був для мене новим (навіть у 2013 році).
Майк Еберт

Краще, ніж помістити зображення всередину таблиці, просто по центру.
Йонати

3
дисплей: комірка таблиці не завжди
розміщується

1
Що таке " PI"?
Пітер Мортенсен

18

Ви можете спробувати наведений нижче код:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>


14

Рішення фонового зображення

Я повністю видалив елемент зображення і встановив його як фон діла з класом .frame

http://jsfiddle.net/URVKa/2/

Це принаймні добре працює в Internet Explorer 8, Firefox 6 та Chrome 13.

Я перевірив, і це рішення не допоможе зменшити зображення, що перевищують висоту 25 пікселів. Існує властивість, що називаєтьсяbackground-size яка , встановлює розмір елемента, але саме CSS 3 суперечить вимогам Internet Explorer 7.

Я б радив вам або змінити пріоритети свого веб-переглядача та створити найкращі доступні веб-переглядачі, або отримати код на стороні сервера, щоб змінити розмір зображень, якщо ви хочете використовувати це рішення.


Дуже приємне рішення, проте я очікую, що деякі зображення будуть більшими, ніж контейнер, і в цьому випадку я планував використовувати для них max-висоту / max-ширину. Будь-який спосіб зробити це за допомогою фонових зображень?
Арно Ле Блан

це не ".frame element", це "div з класом .frame"
JGallardo

Якщо висота зображення не перевищує висоту кадру Div, це найкраще і найпростіше рішення ...
efirat

13

Уявіть, що у вас є

<div class="wrap">
    <img src="#">
</div>

І css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Уау! Flex справді rulzzzz! Дякую!
Педро Феррейра

використовуйте обкладинку, яка відповідає об'єкту, якщо ви хочете, щоб дитина зайняла повну ширину батька і все ще була вертикально вирівняна до середини. Дивіться css-tricks.com/snippets/css/a-guide-to-flexbox, щоб перемістити зображення в батьківській програмі за допомогою flex-box
mattdlockyer

11

Ви можете це зробити:

Демо

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}    


JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

Приємно. Будь-який шанс на рішення з чистою програмою css?
Арно Ле Бланк

На жаль, ні, якщо ви не хочете використовувати таблиці або скасувати сумісність зі старими версіями IE. :( Якби ви знали точний розмір зображень перед рукою, це було б інакше, але не без цього неможливо лише з CSS.
Джозеф Марікле

@Joseph Як би ви виправили це за допомогою таблиць?
Бенджамін Удінк десять Кейт

@Benjamin Udink ten Cate Це безладно, але це можна зробити так: jsfiddle.net/DZ8vW/2 (це не радиться, але слід працювати)
Джозеф Марікле

1
Добре це підходить arnauds потребує ідеально. Немає JS, лише CSS та HTML.
Бенджамін Удінк десять Кейт

11

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

Ключова властивість призначена display: table-cell;для .frame. Div.frameвідображається як рядок із цим, тому потрібно загортати його в блок-елемент.

Це працює в Firefox, Opera, Chrome, Safari та Internet Explorer 8 (і новіших версіях).

ОНОВЛЕННЯ

Для Internet Explorer 7 нам потрібно додати вираз CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Чудово. Будь-який хак для IE7, який би уникнув JavaScript?
Арно Ле Бланк

Я не впевнений, але, можливо, вирази css допоможуть. Але вони теж JavaScript. Різниця лише в тому, що ви записуєте їх у файли css, а не у js.
Вебр

Так, приємна ідея. Це було б більш керовано (сценарій автоматично запускається у міру необхідності), і як це повинно бути IE7-тільки це нормально.
Арно Ле Бланк

7

Моє рішення: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

7

Це працює для сучасних браузерів (2016 на час редагування), як показано в цій демонстрації на codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

Дуже важливо, щоб ви дали класам зображення або використовували спадщину для націлювання на зображення, які вам потрібні по центру. У цьому прикладі ми використовували .frame img {}так, що .frameнацілюватимуть лише зображення, загорнуті ділом із класом .


тільки ie7, просто поставте висоту рядка: 25px;
anglimasS

1
це не здається правильно вирівняним навіть у firefox та chrome ( jsfiddle.net/4RPFa/19 )
Арно Ле Бланк

7

Спробуйте це рішення за допомогою чистого CSS http://jsfiddle.net/sandeep/4RPFa/72/

Можливо, це головна проблема вашого HTML. Ви не використовуєте лапки, коли ви визначаєте c lass& image heightу своєму HTML.

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

Коли я працюю з imgтегом, він залишає від 3 пікселів до 2 пікселів місця top. Зараз я зменшуюся line-height, і це працює.

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

line-heightВластивість виявляється по- різному в різних браузерах. Отже, ми повинні визначити різні line-heightбраузери властивостей.

Перевірте цей приклад: http://jsfiddle.net/sandeep/4be8t/11/

Перевірте цей приклад про line-heightрізні в різних браузерах: різницю висоти введення для Firefox та Chrome


2
Не працює (принаймні, у Firefox). Для відсутніх лапок це дозволено в HTML5 (не знаю, який тип дотипу використовується в jsfiddle)
Арно Ле Блан

7

Я не впевнений , що Internet Explorer, але в Firefox і Chrome, якщо у вас є imgв divконтейнері, такий зміст CSS має працювати. Принаймні для мене це працює добре:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

IE8 +, на жаль. Чудово для мене, але, можливо, не для інших.
TheCarver

також зауважте, що display:table-cell;не сприймає% як ширину
Mutmatt

7

Розв’язання за допомогою комірок таблиці та таблиці

Іноді це слід вирішити, відображаючи як таблицю / стільницю-таблицю. Наприклад, швидкий екран заголовка. Це також рекомендований W3. Рекомендую перевірити це посилання під назвою Центрування блоку або зображення з W3C.org.

Тут використовуються поради:

  • Абсолютний контейнер для позиціонування відображається у вигляді таблиці
  • Вертикально вирівняний по центру вміст, відображений у вигляді комірки таблиці

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

Особисто я не згоден щодо використання помічників для цієї мети.


6

Простий спосіб, який працює для мене:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Він дуже добре працює для Google Chrome. Спробуйте це в іншому браузері.


6

Для центрування зображення всередині контейнера (це може бути логотип), окрім тексту на зразок цього:

Введіть тут опис зображення

В основному ви загортаєте зображення

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>


4

Якщо ви можете жити з розмірами пікселів, просто додайте font-size: 1px;до .frame. Але пам’ятайте, що зараз на .frame1em = 1px, а це означає, що вам потрібно встановити поле і в пікселях.

http://jsfiddle.net/feeela/4RPFa/96/

Тепер це більше не зосереджено в Opera…


3

У мене була така ж проблема. Це працює для мене:

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

насправді "позиція: виправлена" на зображенні працювала для мене, де я був розчарований через численні помилкові відповіді людей, які пропонують метод стільникових клітин, який не працював у сусідах моїх робіт. З методом, запропонованим algreat, вам також не потрібен додатковий контейнер.
Василіос Паспалас

2

Ви можете скористатися цим:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

1

За допомогою tableта table-cellметодів виконайте роботу, особливо тому, що ви орієнтуєтесь також на деякі старі веб-переглядачі, я створюю для вас фрагмент, який ви можете запустити і перевірити результат:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}
<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div> 


0

Я граю навколо, використовуючи накладки для вирівнювання по центру. Вам потрібно буде визначити розмір зовнішнього контейнера верхнього рівня, але внутрішній контейнер повинен змінити розмір, і ви можете встановити прокладку з різними значеннями відсотків.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

0

Найкраще рішення - це

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

0

Скористайтеся цим:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

І ви можете варіювати font-size.


0

Хочете вирівняти зображення, яке має текст / заголовок і обидва знаходяться всередині div?

Дивіться на JSfiddle або Run Code Snippet.

Просто не забудьте мати ідентифікатор чи клас у всіх своїх елементах (div, img, title тощо).

Для мене це рішення працює у всіх браузерах (для мобільних пристроїв ви повинні адаптувати свій код за допомогою: @media).

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}
<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.