Как центрировать изображение как по вертикали, так и по горизонтали, не устанавливая его как фон?

Я хочу установить круговое изображение в центр домашней страницы с помощью одной кнопки, накладывающей это. На странице нет другого контента, просто изображение и кнопка. Как вы, наверное, можете сказать, мы чрезвычайно новичок в кодировании! Мы используем CSS и HTML на Dreamweaver.Как центрировать изображение как по вертикали, так и по горизонтали, не устанавливая его как фон?

источник

2013-12-17 Cufflinks

показать свой код. – Nitesh

Есть так много ответов об этом на SO просто поиск http: // stackoverflow.com/вопросы/396145/whats-the-best-way-of-center-a-div-vertical-with-css and/questions/114543/how-to-center-a-div-in-a-div-horizontally – DaniP

На данный момент у нас их нет, мы просто не знаем, как начать с центрирования изображения. Это буквальная страница с одним изображением! – Cufflinks

ОК, так скажем, у вас есть несколько Div элементов с IMG внутри:

<div class="parent"><div class="img-container"><img src="http://placekitten.com/230/230" alt="kitten"></div></div>

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

.parent { 
    display: table; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 
.img-container { 
    height: 500px; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

См http://jsfiddle.net/NL2ZA/ для демонстрации. Очевидно, вы захотите изменить имена классов, чтобы сказать что-то, что имеет смысл в вашем проекте.

источник

2013-12-17 14:10:06

Спасибо! это действительно помогает! – Cufflinks

Вы можете сделать что-то подобное. Измените идентификатор изображения на любой идентификатор, который у вас есть для этого изображения, покажите его как блок, сделайте его определенной шириной, либо в процентах, либо в пикселях, и в поле 0 автоматически.

#image-id { 
    display: block; 
    width: 60%; 
    margin: 0 auto; 
}

источник

2013-12-17 14:00:09 CRABOLO

Установите CSS для контейнера дел до:

#container { 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
}

Изображение внутри, что DIV должны быть сосредоточены как по горизонтали, так и по вертикали.

источник

2013-12-17 14:00:48

Существует несколько методов.

CSS фона - Вам не нужно, но все же:

html { 
width: 100%; 
height: 100%; 
background: url(logo.png) center center no-repeat; 
}

CSS + встроенные изображения:

img { 
position: absolute; 
width: 400px; height: 400px; 
left: 50%; margin-left: -20px; /* Half the width */ 
top: 50%; margin-top: -20px; /* Half the height */ 
}

Таблица:

html, body, #wrap { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
border: 0; 
} 

#wrap td { 
vertical-align: middle; 
text-align: center; 
} 

<html> 
<body> 
<table id="wrapper"> 
<tr><td><img src="logo.png"></td></tr> 
</table> 
</body> 
</html>

источник

2013-12-17 14:01:21 DADE

Спасибо, мы попробуем это сейчас! – Cufflinks

Не правильный селектор для изображения 'img'? –

Это, конечно, img. Отредактировано больше методов. – DADE

Вы можете установить высоту и ширину от вашего изображения с пикселями или%. Вы также можете изменить положение изображения с помощью поля слева/сверху/справа/снизу. Вы можете найти много информации о html/css здесь: http://www.w3schools.com. Удачи!

источник

2013-12-17 14:03:18 cwi93

очень простой способ сделать это с помощью преобразований css. Нет необходимости в дополнительных HTML помимо изображения в моем примере:»

FIDDLE (WebKit пример)

http://jsfiddle.net/CNs68/

CSS

img { 
    position:absolute; 
    top:50%; 
    left:50%; 
    -webkit-transform: translate(-50%, -50%); 
}

Хорошая вещь об этом примере является что не имеет значения, каков размер изображения, он всегда будет центрирован! Не забудьте добавить другие префиксы (например, moz).

источник

2013-12-17 14:15:26 koningdavid

Попробуем это, спасибо. – Cufflinks

Как центрировать изображение как по вертикали, так и по горизонтали, не устанавливая его как фон?

ответ

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