@vlad7576

Как разместить inline-block'и друг под другом?

Здравствуйте. Вот часть кода. Мне нужно чтобы кнопка находилась под изображением. Я использовал 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;
    }
  • Вопрос задан
  • 3555 просмотров
Пригласить эксперта
Ответы на вопрос 2
AndruSender
@AndruSender
<br/>
Решает :)
Ответ написан
Комментировать
Kirilchuk
@Kirilchuk
Вперед и вверх
после картинки добавить пустой div с свойством clear:both
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы