Блог

Главная - Вопросы по программированию - как выровнять изображение и заголовок

как выровнять изображение и заголовок

#html #css

#HTML #css

Вопрос:

Я пробую некоторые html и css, но не могу найти css для выравнивания 2 частей. Вот изображение проблемы:

imgs

Я хочу, чтобы и изображение, и статья были выровнены по горизонтали с одинаковой высотой.

какой 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:

inside .section_title >h2:

 height: 46px;
margin:0;

https://jsfiddle.net/o32h2rbh/1/

Ответ №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, и оно будет перемещено обратно наверх.