Search code examples
htmlcssalignment

Vertical to Horizontal inline alignment

I have the following 3 wrappers each one with the icon inside. I need to put the 3 logos inline, horizontally side by side above the lettering.

How can I do that?

example

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

enter image description here

Solution

  • You can use flexbox to do that

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

    Added sample based on comment, horizontal layout, centered

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