#html #css
#HTML #css
Вопрос:
Я пробую некоторые html и css, но не могу найти css для выравнивания 2 частей. Вот изображение проблемы:
Я хочу, чтобы и изображение, и статья были выровнены по горизонтали с одинаковой высотой.
какой CSS я должен применить? вот мой html:
<article class="section_title">
<img src="http://i.imgur.com/EY9qUVf.png" width="50" height="50" />
<h2>Inleiding</h2>
</article>
и мой css до сих пор:
.section_title {
display: inline-block;
position: relative;
}
.section_title > img {
float: left;
}
.section_title > h2{
background-color: #232935;
vertical-align: top;
float: right;
left: 50px;
color: white;
height: 50px;
padding: 2px;
}
в jsfiddle: https://jsfiddle.net/yxtkrzmh /
Ответ №1:
Удалите поля из заголовка:
.section_title {
display: inline-block;
position: relative;
}
.section_title > h2 {
margin: 0;
padding: 12px 10px 0;
background-color: #232935;
float: right;
left: 50px;
color: white;
height: 38px;
}
<article class="section_title">
<img src="http://i.imgur.com/EY9qUVf.png" width="50" height="50" />
<h2>Inleiding</h2>
</article>
Комментарии:
1. как вы определили, что высота составляет 38 пикселей? почему это не 50?
2. @SnelleJelle: вы можете изменить поведение этого с
box-sizing
помощью . Прочитайте это для объяснения.
Ответ №2:
Ответ №3:
предоставьте margin:0
вашему section_title > h2
и измените его height
в соответствии с вашими потребностями.
Ответ №4:
Большинство браузеров будут применять стили по умолчанию к различным элементам. Например, в Chrome к h2 прикреплено несколько свойств.
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
Тот, который толкает ваш h2 вниз, это:
-webkit-margin-before: 0.83em;
Установите значение 0, и оно будет перемещено обратно наверх.