我有以下3个包装器,每个包装器里面有图标。我需要将3个徽标内嵌,水平并排放置在字母上方。
我该怎么做?
https://jsfiddle.net/Pumizo/37m8v1x8/
<a href="index.html" id="logo">
<span class="pennant"><span class="icon fa-camera"></span></span>
<span class="pennant"><span class="icon fa-truck"></span></span>
<span class="pennant"><span class="icon fa-heart"></span></span>
<h1>EURO-TRUCKS.org</h1>
</a>
/* Logo */
#logo .pennant {
font-size: 1.25em;
margin-right: 0.75em;
}
#logo h1 {
letter-spacing: 0.1em;
font-size: 1.75em;
display: inline-block;
}
.homepage #logo {
text-align: center;
}
.homepage #logo .pennant {
display: block;
margin: 0 0 1em 0;
font-size: 2.5em;
}
.homepage #logo h1 {
display: block;
font-size: 2.5em;
}
答案 0 :(得分:1)
您可以使用flexbox
来执行此操作
#logo {
display: flex;
flex-direction: column;
align-items: center;
}
Stack snippet
/* Logo */
#logo {
display: flex;
flex-direction: column;
align-items: center;
}
#logo .pennant {
font-size: 1.25em;
}
#logo h1 {
letter-spacing: 0.1em;
font-size: 1.75em;
text-align: center;
}
.homepage #logo * {
font-size: 2.5em;
}
<a href="index.html" id="logo">
<span class="pennant"><span class="icon fa-camera">1</span></span>
<span class="pennant"><span class="icon fa-truck">2</span></span>
<span class="pennant"><span class="icon fa-heart">3</span></span>
<h1>MY QUOTE</h1>
</a>
根据评论,水平布局,居中
添加了示例
/* Logo */
#logo {
display: flex;
justify-content: center;
align-items: center
}
#logo .pennant {
font-size: 1.25em;
}
#logo h1 {
letter-spacing: 0.1em;
font-size: 1.75em;
text-align: center;
}
.homepage #logo * {
font-size: 2.5em;
}
<a href="index.html" id="logo">
<span class="pennant"><span class="icon fa-camera">1</span></span>
<span class="pennant"><span class="icon fa-truck">2</span></span>
<span class="pennant"><span class="icon fa-heart">3</span></span>
<h1>MY QUOTE</h1>
</a>