html - 垂直到水平内联对齐

Question

我有以下 3 个 wrapper ，每个 wrapper 里面都有图标。我需要将 3 个 Logo 水平并排放置在文字上方。

我该怎么做？

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;
                }

Answer 1

你可以使用 flexbox 来做到这一点

#logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

堆栈片段

/* 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>