縦横のインラインアライメント

Question

私は以下の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; 
       } 

Answer 1

あなたは

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

スタックは、スニペットことを行うためにflexboxを使用することができます

0コメント、水平レイアウトに基づいて

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