How do I center and stack 2 items in a flexbox?-CodePudding

I'm trying to have the Title and the Subtitle stack on top of each other while also being centered, does anyone have an idea how I can do this?

Code

#titleBar {
  display: flex;
  justify-content: space-between;
}

#titleContainer {
  display: flex;
  justify-content: center;
}

<div id="titleBar">
  <div id="profile">
    <a href=""><img src="https://img.icons8.com/material-outlined/48/000000/user-male-circle.png" alt="Profile Picture"  />
    </a>
  </div>
  <div id="titleContainer">
    <h1 id="title">Title</h1>
    <h3 id="subtitle">Subtitle</h3>
  </div>
  <div id="search">
    <img src="https://img.icons8.com/external-dreamstale-lineal-dreamstale/32/000000/external-search-ui-dreamstale-lineal-dreamstale.png" />
  </div>
</div>

CodePudding user response：

you can use

 flex-direction: column;

to have the two item stack one above other

#titleBar {
  display: flex;
  justify-content: space-between;
}

#titleContainer {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div id="titleBar">
  <div id="profile">
    <a href=""
      ><img
        src="https://img.icons8.com/material-outlined/48/000000/user-male-circle.png"
        alt="Profile Picture"
        
      />
    </a>
  </div>
  <div id="titleContainer">
    <h1 id="title">Title</h1>
    <h3 id="subtitle">Subtitle</h3>
  </div>
  <div id="search">
    <img
      src="https://img.icons8.com/external-dreamstale-lineal-dreamstale/32/000000/external-search-ui-dreamstale-lineal-dreamstale.png"
    />
  </div>
</div>

CodePudding user response：

Flex layout seems heavy-handed just for that, and it would modify standard heading spacing. Keep it simple with text alignment. Heading elements are block-level by default.

#titleBar {
  display: flex;
  justify-content: space-between;
}

#titleContainer {
  text-align: center;
}

<div id="titleBar">
  <div id="profile">
    <a href=""><img src="https://img.icons8.com/material-outlined/48/000000/user-male-circle.png" alt="Profile Picture"  />
    </a>
  </div>
  <div id="titleContainer">
    <h1 id="title">Title</h1>
    <h3 id="subtitle">Subtitle</h3>
  </div>
  <div id="search">
    <img src="https://img.icons8.com/external-dreamstale-lineal-dreamstale/32/000000/external-search-ui-dreamstale-lineal-dreamstale.png" />
  </div>
</div>

CodePudding user response：

Display flex puts the direction of the child elements at row by default, so basically what you want to do is to change the flex-direction to column to stack the elements inside of it.

#titleBar {
  display: flex;
  justify-content: space-between;
}

#titleContainer {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div id="titleBar">
  <div id="profile">
    <a href=""><img src="https://img.icons8.com/material-outlined/48/000000/user-male-circle.png" alt="Profile Picture"  />
    </a>
  </div>
  <div id="titleContainer">
    <h1 id="title">Title</h1>
    <h3 id="subtitle">Subtitle</h3>
  </div>
  <div id="search">
    <img src="https://img.icons8.com/external-dreamstale-lineal-dreamstale/32/000000/external-search-ui-dreamstale-lineal-dreamstale.png" />
  </div>
</div>