如何单独设置标题样式，将图片放在两侧，添加社交媒体图标并居中

Question

新手从头开始创建网站，出于某种原因，我的两张照片(png(并排放置，这是正确的，但我想要h1和png文件之间有一个空间，它们靠得太近了吗？其次，我该如何插入社交媒体图标，因为它刚好落在标题下方，我希望它们位于标题上方，标题内有两个图标，但刚好位于右上角标题上方？如何将标题和两个并排放置的图标居中？

这是我的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;
}

Answer 1

不要将图像放在Header标记中。您可以使用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>

Answer 2

检查ccs flexbox样式原理。它将回答您关于商品排列的所有问题

Answer 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>