Как центрировать изображение в середине страницы в css?

Как я могу центрировать что-то подобное прямо на середине страницы по горизонтали?Как центрировать изображение в середине страницы в css?

HTML -

<div class="inner"> 
<img src="img/shoplove-design.png" alt="Recipe App" /> 
</div> 

CSS 
.inner { 
width: 800px;   
}

источник

2016-04-24 Adrien

Я попробовал дисплей: блок; margin-left: auto; margin-right: auto; Но, похоже, не центр. – Adrien

Вы должны дать ширину к вашим IMG для выравнивания по горизонтали с помощью margin-left:automargin-right:auto.

.inner { 
    width: 800px; 
    border:1px solid black; 
} 

img{ 
    display:block; 
    margin:0 auto; 
    width:200px; 
}

JSFiddle

Или вы можете выровнять IMG, сделав его inline-block и дать text-align:center своему родителю

.inner { 
    width: 800px; 
    border:1px solid black; 
    text-align:center; 
} 

img{ 
    display:inline-block; 
}

JSFiddle

источник

2016-04-24 06:19:01 MOD

Это сработало. Я не указал ширину. Я установил его на 90%, и это было отличное размещение. – Adrien

Попробуйте подключить класс к изображению как

<img class="centered" src="img/shoplove-design.png" alt="Recipe App" />

и определить его люблю:

.centered{width:270px; /* use yours*/ 
      height:150px; /* use yours*/ 
      position:absolute; 
      left:50%; 
      top:50%; 
      margin:-75px 0 0 -135px;} /* use yours divided by 2*/

источник

2016-04-24 06:22:56

Самым простым решением является использование text-align: center;see it in action.

Это работает, потому что IMG является дочерним div.inner. Таким образом div.inner является то, что это div элемент по умолчанию это дисплей: блок; Таким образом, будет иметь значение ширина: 100%; его родителя.

Теперь, если вы хотите сказать, выравнивать изображение по вертикали, а div.inner необходимо будет дисплей: таблица-клеток; и его родитель должен быть дисплей: стол;.

Затем вертикальное выравнивание изображения так же просто, как добавление вертикальное выравнивание: среднее; до .inner.

Example Weave:http://kodeweave.sourceforge.net/editor/#fcad28261445fbcae79a9253f502cd2d

источник

2016-04-24 06:34:19

Если вы ОК с помощью фонового изображения, вы можете также это:

<html><head><style> 
html, body {height: 100%} 
body { 
    background-image: url(img/shoplove-design.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 
</style></head><body></body></html>

Это дает% высоты страницы 100 и показывает изображение в центре. Чтобы лучше понять, как работает CSS, я намеренно не сократил инструкции CSS.

Рабочий пример: http://codepen.io/anon/pen/bpjZjb?editors=1100

Хорошая вещь об этом решении является то, что она полностью реагирует и может быть легко приспособлена к вашим потребностям.Вот пример с элементом div элемента OP: http://codepen.io/anon/pen/BKPbqX?editors=1100

источник

2016-04-24 07:05:56 JoostS

Как центрировать изображение в середине страницы в css?

ответ

Смежные вопросы