Блог

Главная - Вопросы по программированию - Как мне оформить заголовок отдельно и поместить фотографии с обеих сторон, добавить значки социальных сетей и центрировать его

Как мне оформить заголовок отдельно и поместить фотографии с обеих сторон, добавить значки социальных сетей и центрировать его

#html #css

#HTML #css

Вопрос:

Новичок в создании веб-сайта с нуля, по какой-то причине 2 моих фото (png) расположены рядом, что правильно, но я хочу, чтобы между файлами h1 и png был пробел, они слишком близко друг к другу? Во-вторых, как мне вставить значки социальных сетей, потому что они просто опускаются ниже заголовка, я хочу, чтобы они были над заголовком и 2 значка в заголовке, но чуть выше заголовка в правом верхнем углу? И как мне центрировать заголовок и 2 иконки, которые находятся рядом?

Вот мой html-код

 <header
<div class="header">
<h1><img src="s-l300.png" width="100" height=100" class="left-icon">  Explore Russia  <img src="s-l300.png" width="100" height=100" class="right-icon"></h1>
<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
</div>
</header>

Вот мой код css:

     /*Format Header Title */
h1 {
  text-decoration:overline;
  text-color: black;
  margin: 0px;
  vertical-align:center;
  font-size:50px;
  font-family:"Arial Black", Gadget, sans-serif  text-decoration: overline;
}

/*Format Header */
.header {
  background-color: red;
  padding: 30px;
    animation-name: flash;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    vertical-align:center;
}

Комментарии:

1. У вас есть ошибки в вашем HTML (отсутствует> после center Поможет ли это, если вы их исправите?

2. В ответе Gnanavel есть несколько ошибок (css и html). Вы должны серьезно это исправить. Заголовки не должны содержать изображений. Это плохая практика, и у вас также будут проблемы с SEO. Получите правильную разметку на этой ранней стадии.

Ответ №1:

Не помещайте изображения внутри тегов заголовка. Вы можете использовать flexbox для размещения изображений по обе стороны от вашего заголовка. Также есть проблемы с вашим стилем шрифта. Смотрите Исправленный пример ниже.

 .header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.icon-wrapper {
  text-align: center;
}

.icon-wrapper a {
  padding: 0 15px;
  text-decoration: none;
}

.header-wrapper img {
  width: 100px;
  height: 100px;
}

header {
  background-color: red;
  padding: 30px;
  animation-name: flash;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}

h1 {
  font-family: "Arial Black", Gadget, sans-serif;
  display: inline-block;
  text-decoration: overline;
  text-align: center;
  margin: 0;
  font-size: 34px;
  padding: 20px;
}  
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
  <div class="header-wrapper">
    <img src="s-l300.png" />
    <h1>Explore Russia </h1>
    <img src="s-l300.png" />
  </div>
  <div class="icon-wrapper">
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-twitter"></a>
  </div>
</header>

Ответ №2:

проверьте принцип укладки ccs flexbox. он ответит на все ваши вопросы о выравнивании элементов

Ответ №3:

Попробуйте это

 *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  text-decoration:overline;
  color: black;
  margin: 0px;
  vertical-align:center;
  font-size:50px;
  font-family:"Arial Black", Gadget, sans-serif  text-decoration: overline;
  text-align: center;
}

/*Format Header */
.header {
  background-color: red;
  padding: 30px;
  animation-name: flash;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  vertical-align:center;
  position: relative;
}
.header .left-icon{
  margin-right:10px;
}
.header .right-icon{
  margin-left: 10px;
}
.social-icons{
  position: absolute;
  top:10px;
  right:10px;
}
.social-icons a{
  margin-left:10px;
}  
 <header>
  <div class="header">
    <h1><img src="s-l300.png" width="100" height="100" class="left-icon">  Explore Russia  <img src="s-l300.png" width="100" height="100" class="right-icon"></h1>
  </div>
  <div class="social-icons">
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-twitter"></a>
  </div>
</header>