Здравствуйте. Вот часть кода. Мне нужно чтобы кнопка находилась под изображением. Я использовал inline-block, чтобы
разместить картинку и кнопку ровно по середине . Но естественно, картинка и кнопка находятся на одной высоте.Что нужно сделать, чтобы устранить эту проблему?И как выполнить все эти условия(блоки ровно по середине,кнопка под картинкой),
при этом сохранив резиновую верстку?<!DOCTYPE html>
<html>
<head>
<title>главная</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/CSS/styles-2.css" type="text/css" >
</head>
<body>
<div class="column-content content2">
<img src="/IMAGE/Forward_FGS-45_PRO.jpg" width="450" height="390">
<input type="button" id="buy" value="слово">
</div>
</body>
</html>
.html,
body {
margin: 0;
padding: 0;
}
.content2 {
text-align: center;
background-color: #e5e5e5;
width: 100%;
height: 700px;
margin-bottom: 30px;
padding-top: 1px;
padding-bottom: 1px;
}
.content2 img {
display:inline-block;
box-shadow: 1px 1px 8px #646464;
}
#buy {
display:inline-block;
width: 370px;
height: 80px;
background-color: #e55656;
border: none;
border-radius: 3px;
box-shadow: 1px 1px 5px #646464;
font-family: Verdana, sans-serif;
font-size: 30px;
color: #fff;
text-align: center;
}
Простой
Простой