Question: I am trying to vertically align to flexed items. the second flexed item contains a form button with tex of a different size added before the submit button. The text before lines up perfectly with the button text. However the second flexed item will not vertically align with the second flexed item.

Any pointers as to where I'm going wrong? Thanks

Thanks

```css
#intro {
       display: flex;
       align-items: center;  
    }

    button {
      border: none;
      background: transparent;
      padding: 0 0 0 1em;

    }

    #intro h1,
    #intro button {
      font-size: 3rem;
      color: green;
      font-family: sans-serif;
    }

    button#create-btn:before{
        content:" +";
        font-size:2em;
        vertical-align: middle;
    }

    #a-txt{
        vertical-align:middle;
    }
```

```html
    <section id="intro">
      <div>
        <h1>My Text Heading</h1>
      </div>
      <form>
        <button type="reset" id="create-btn"><span id="a-txt">Reset</span></button>
      </form>
    </section>
```

Answer: 
I would approach it this way. Even though it's not centered geometrically, it should be centered optically for a better user experience.

```css
   #intro {
   display: flex;
   align-items: center 
}

button {
  border: none;
  background: transparent;
  padding: 0 0 0 1em;
  display: flex;
  align-items: center;
}

#intro h1,
#intro button {
  font-size: 3rem;
  color: green;
  font-family: sans-serif;
}

button#create-btn:before{
    content:" +";
    font-size: 2em;
    position: relative;
    bottom: 0.1em;
}
```

```html
    <section id="intro">
      <div>
        <h1>My Text Heading</h1>
      </div>
      <form>
        <button type="reset" id="create-btn"><span id="a-txt">Reset</span></button>
      </form>
    </section>
```
I think that what you want is the flex-direction: column

Here is a very compressive guide for flexbox. <https://css-tricks.com/snippets/css/a-guide-to-flexbox/>

```css
#intro {
       display: flex;
       flex-direction: column;  
    }

    button {
      border: none;
      background: transparent;
      padding: 0 0 0 1em;

    }

    #intro h1,
    #intro button {
      font-size: 3rem;
      color: green;
      font-family: sans-serif;
    }

    button#create-btn:before{
        content:" +";
        font-size:2em;
        vertical-align: middle;
    }

    #a-txt{
        vertical-align:middle;
    }
```

```html
    <section id="intro">
      <div>
        <h1>My Text Heading</h1>
      </div>
      <form>
        <button type="reset" id="create-btn"><span id="a-txt">Reset</span></button>
      </form>
    </section>
```