#html #css #alignment
#HTML #css #выравнивание
Вопрос:
Я заметил, что когда у меня есть текст в моих встроенных блочных divs, они перемещаются вниз, а не остаются на месте, как я могу это исправить, чтобы он соответствовал другим с текстом внутри?
Скриншот
HTML
<html>
<head>
<title>My Web site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="home.css">
</head>
<body>
<div id="container">
<div id="jumbotron">
</div>
<center>
<div class="listbox">
<h1>exapmle</h1>
</div>
<div class="listbox">
</div>
<div class="listbox"></div>
</center>
<!-- container end div -->
</div>
</body>
</html>
CSS
#container{
height:100%;
width:100%;
background-color: #669999;
padding: 5px 5px 5px 5px;
}
.listbox{
height: 250px;
width: 250px;
background-color: #003333;
display:inline-block;
border-radius:5px;
}
#jumbotron{
margin:2px auto 5px auto;
background-color:black;
border-radius:5px;
height:450px;
width:900px;
color:#ffffff;
}
Ответ №1:
Применитесь vertical-align:top;
к вашему .listbox
классу CSS. Эта проблема связана vertical-align
с значением по умолчанию ( baseline
) , поэтому, когда есть текст, это влияет на базовую линию для всех встроенных элементов и выталкивает один с текстом вниз.
JSFiddle
Ответ №2:
Это происходит, потому что браузер пытается сопоставить базовую линию всех встроенных элементов.
Добавить vertical-align: middle
в .listbox
Комментарии:
1. Это устранило проблему. Спасибо.
Ответ №3:
Это из-за <h1>
тега, который у вас здесь:-
<div class="listbox">
<h1>exapmle</h1>
</div>
Вы не указали для этого никакого правила. Попробуйте добавить это в свой CSS:-
h1 { float: left; }