Мне нужно центрировать мое изображение, используя css. У меня проблемы, и я не могу понять, как это сделать.Центрирование изображения через div
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<title>
AG.
</title>
<body>
<img src="images/logo.png" alt="AG" class="logo">
</body>
</html>
CSS
.logo {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
}
Вы не можете центрировать встроенный элемента таким образом - вы должны дать ему display: block стиля:
.logo {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
display: block;
}<img src="http://placehold.it/500/467" alt="AG" class="logo">Большое вам спасибо! – Sagelane
Сначала поместите свое изображение внутри контейнера, в противном случае высота и ширина просто изменяют размер изображения.
Я добавил его в div и затем добавил свойства в свой контейнер.
http://codepen.io/anon/pen/uHaGC
Вот код пера.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<title>
AG.
</title>
<body>
<div id="logo">
<img src="images/logo.png" alt="AG">
</div>
</body>
</html>
#logo {
position: relative;
width: 50%;
margin-left: auto;
margin-right: auto;
}
Тег #logo сосредотачивает его (возможно, не в зависимости от вашего разрешения). Просто установите новый тег для своего изображения и измените размер!
Я предпочитаю использовать проценты, а не количество пикселей, потому что тогда он выглядит лучше при больших или меньших разрешениях.
Чтобы обернуть изображение в DIV,
изменения HTML, и добавить идентификатор так: (Кстати, я использовал Google изображение в качестве держателя место, но вы получите идею)
<div id="pic">
<img src="https://www.google.com/logos/doodles/2014/jonas-salks-100th-birthday-5130655667060736-hp.jpg" alt="AG" class="logo">
</div>
, а затем для CSS
#pic {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
Посмотреть работу в http://jsfiddle.net/e5pdof91/
}
Добавить отображение: block to .logo class - если вам просто нужно горизонтальное центрирование .... – sinisake