Using flex to align items

Hi,

I am having some trouble aligning items horizontally and vertically using flexbox.

This is my fiddle:

I am trying to align the Logo Image and Logo name & description to be centered horizontally as well as the Nav. I also can’t seem to align the Nav to the right.

Can anyone help me align these items?

Sure, glad to help.

Are you using a framework? I’m not a Fiddle user and can’t tell what the URL to the framework is, if any. If so, would you mind telling me where to find it in the Fiddle?

Have you validated the HTML used in your fiddle? There seems to be a closing tag missing.

I think I’ve given you the URL to CSS Tricks article/s about flex, but just in case I’m mistaken, their article has just been updated this year!

For additional “help” you can click the magnifying glass icon in the top right of this page and search for “flex”. There are well over 200 topics with questions and examples. Surely you will find something that you can learn from by reading some of those examples. You might even find one that behaves exactly the way you wish.

Fishing is good in the SitePoint hood.

You have a missing </a>

here

<h1><a href="#">LOGO NAME</h1>

spoil-sport :tongue:

1 Like

Hi,

Thanks for the replies.

I’m using Bootstrap.

Thanks for pointing out the missing closing </a> tag - that seems to have fixed the right alignment issue.

I still can’t work out how to center all the elements vertically.

This is the updated fiddle:

Look a little ways down the page and find “justify-content”. See if one of those diagrams matches your wish to center stuff.

PS: I found the bootstrap URLs this time. Thanks :slight_smile:

1 Like

Thanks, the align-items: center; worked :slight_smile:

1 Like

Try the following and see how it compares/works. Normally one would not “position” the individual children with align-items when one can assign justify-content to the parent (flex) box.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/using-flex-to-align-items/328319
toolman
https://jsfiddle.net/toolman/15ksa7tm/9/
-->
    <style>
.top-header-container {
    padding: 0 30px;
    outline:1px dotted blue;
}
.top-header-bar {
    display: flex;
    justify-content:space-between;  /* ADDED */
    padding: 15px 0;
    outline:1px dashed green;
}
.top-header-logo {
    margin-right: 15px;
    outline:1px solid pink;
}
.top-header-logo-text {
    text-align: left;
    outline:1px solid pink;
}
.top-header-logo-text h1 {
    margin: 0;
    outline:1px solid pink;
}
.top-header-logo-text h1 a {
    color: #696cbb;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 36px;
    font-size: 36px;
    background-color:rgba(255,128,128,.2);
}
.top-header-logo-text h2 {
    color: #8d8d8d;
    font-weight: 400;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 10px;
    outline:1px solid pink;
}
.top-header-nav {
/*    align-items: flex-end;  /* DELETED */
/*    margin-left: auto;      /* DELETED */
    outline:1px solid pink;
}
    </style>
</head>
<body>

<header id="masthead" role="banner">
    <div class="container top-header-container">
        <div class="row top-header-bar">
            <div class="top-header-logo">
                LOGO IMAGE
            </div>
            <div class="top-header-logo-text">
                <h1><a href="#">LOGO NAME</a></h1>  <!-- the closing "a" was missing -->
                <h2>DESCRPTION</h2>
            </div>
            <div class="top-header-nav">
                <div class="btn-menu"></div>
                <nav id="mainnav" class="mainnav" role="navigation">
                    NAV
                </nav> <!-- #site-navigation -->
            </div>
        </div>
    </div>
</header>

</body>
</html>

You can delete the outlines and background-color. :slight_smile:

1 Like

Many thanks for that, I will give it a go :slight_smile:

1 Like

I would suggest that you could try it without. :winky:

Also, it might be prudent, in this instance, to
use “display: table” rather than “display: flex”.

Here is a basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#header{
    display: table; 
    width: 100%;
 }

#header > div {
   display: table-cell;
   width: 33.333%;
   padding: 1%;
   vertical-align: middle;
   text-transform: uppercase;
 }

#header > div:nth-of-type(2) {
    text-align: center;
 }
#header > div:nth-of-type(2)  a {
    display: inline-block;
    line-height: 1em;
    font-size: 2.5em;
    font-weight: bold;
    color: #696cbb; 
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
 }

#header > div:nth-of-type(2)  span {
    display: block;
    line-height: 1em;
    font-size: 0.4em;
    font-weight: normal;
    color: #8d8d8d;
 }

#header > div:nth-of-type(3) {
    text-align: right;
 }

@media ( max-width: 29em ) {
#header > div:nth-of-type(2)  a {
    white-space:normal;
  }
 }
</style>

</head>
<body>
 <div id="header">

  <div>logo image</div>

  <div>
   <a href="#">logo name
    <span>description</span>
   </a>
  </div>

  <div>nav</div>
 </div>
 
</body>
</html>

coothead

1 Like

Looking at @coothead’s example, I realized that in my flex example I had overlooked the vertical centering that you had requested. You may have used it correctly earlier (it wasn’t shown) but “just in case”… add “align-items:center” to .top-header-bar like this:

.top-header-bar {
    display: flex;
    justify-content:space-between;  /* ADDED */
    align-items:center;             /* ADDED */
    padding: 15px 0;
    outline:1px dashed green;
}

and delete it from anywhere else that it may appear.

Sorry for the blooper. dizzy

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.