What is the best way to align and layer two elements within a flexbox?

Is there a way to stack the Title and Subtitle on top of each other in a centered manner? Any suggestions?

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" class="profilePicture" />
    </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>

htmlcss

Answer №1

you may utilize

 flex-direction: column;

to arrange the two items on top of each 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"
        class="profilePicture"
      />
    </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>

Answer №2

Using flex layout for this purpose may seem excessive and could impact the spacing of standard headings. Opting for simple text alignment is a more straightforward approach. By default, heading elements are block-level.

#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" class="profilePicture" />
    </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>

Answer №3

When using display flex, the default direction of child elements is row. If you want to stack the elements vertically, you can change the flex-direction to column.

#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" class="profilePicture" />
    </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having issues with implementing Bootstrap 4 dynamic nav-pills in PHP CodeIgniter

When I select different product categories, only the items from the active category are displayed. When I click on another nav-item, the previously displayed items remain unchanged and I'm unable to change the class "show active" in the tab-panes. Co ...

phphtmlcodeigniterbootstrap-4nav-pills

Is it possible in Highcharts.js to link paths and text to tick marks?

Can paths/text be mapped to tick marks? For example, I would like a horizontal black line from the minimum (1) to the maximum (100) across the graph. I also want it to scale if the user resizes the window. Although I noticed that the entire graph (includin ...

javascriptcsshighcharts

Having trouble displaying database model information in the template

My challenge is displaying information from the Django third model (class Jenkinsjobsinformation) in the template. I've been successful in showcasing data from the first and second models (Projectname and Jenkinsjobsname). See below for a snippet of m ...

pythonhtmldjangodjango-templates

Modify a different tag within CSS

I am attempting to reduce the space between the words: "frihedskamp og fremtidsforelskelse" When I remove the CSS tag in line 149, the spacing returns to normal. To address this, I tried adding the following override on line 266: HTML <div class="col ...

htmlcss

Is it possible for you to generate an array containing only one element?

I've encountered an issue with my code. It functions correctly when the JSON data for "Customers" is in array form. However, if there is only one customer present, the code erroneously creates 11 table columns (corresponding to the number of keys in t ...

javascripthtmlangularjs

Switching up the menu choices does not result in a shift in the active class, despite attempting the workaround outlined in the following link

Currently, I am working on a website which can be accessed at the following link: . You can find a helpful example link below. How to change active class while click to another link in bootstrap use jquery? Now, I will showcase the code that I have writt ...

javascripthtmljquerycsstwitter-bootstrap

Juggling PHP scripts within javascript

Can you help me with a question I have? I am working on multiple JS scripts, such as this one: <script> $('#mapveto1').click(function() { $('#mapveto1').addClass('banned'); $('#map1').text('cobble ...

javascriptphpjqueryhtml

Having difficulty creating a popover that is activated by clicking on the three dots, similar to the ones seen in Facebook posts

I have a Django template displaying a list of posts and I want to add three dots to each post. When clicked, a popover should appear with clickable options like Delete and Copy Link. To get a better idea of what I'm looking for, you can reference Inst ...

javascripthtmljquerycssbootstrap-4

Problems arising from navigating between rtl and ltr modes on Internet Explorer 7

I have created a basic sliding animation for a div (developed from scratch without third-party plugins) that works well in IE10, FF, and Chrome, but has issues in IE 7. It still works in IE 8 though. HTML <div class="aboutus"> <div class="ma ...

jqueryhtmlcss

I have successfully implemented a click effect on one image and now I wish to apply the same effect to the remaining images

I've exhausted all my options and still can't crack this puzzle. Let me break it down for you: Upon entering the page, users are greeted with a collection of images each tagged with classes (for example, img01 and img02). When an image is clicke ...

javascriptjquerycssimage

Tips on building a blog using solely index.html, style.css, and script.js files

Looking for inspiration for blog listing pages? Check out some examples like: HubSpot's marketing blog or iGoMoon's blog. I'm trying to figure out where I should start. Should I begin with the first line of code? Or can I import sample code ...

javascripthtmlcssblogs

Update a variety of CSS properties simultaneously

Is it possible to change multiple CSS attributes of an element with just one line of code? Currently, if I want to alter various CSS attributes of an element, I have to write separate lines of code for each attribute. For instance: $("div#start").cli ...

javascriptjqueryhtmlcss

executing JavaScript code within a div container

here's the code snippet I'm working with: $(document).ready(function(){ $('#next').click(function() { $('.current').removeClass('current').hide() .next().show().addClass('current'); if ($ ...

javascriptjqueryhtmlcss

Add a Font Awesome 5 icon to serve as the background of a Bootstrap 4 card

How can I utilize a Font Awesome 5 icon as the background image for a card using Bootstrap-4? After trying numerous solutions found online, I am still unable to get it to work. My environment consists of Angular2 (v8) in conjunction with Bootstrap 4. ...

csstwitter-bootstrapbootstrap-4font-awesomefont-awesome-5

A guide on utilizing ClassName to insert new items into a DIV

Original HTML code: <span class="specLink"> <specialty><a title="Plastic Surgery" href="link2.aspx">Plastic Surgery</a></specialty> </span> <br /> <span class="specLink"> <specialty2><a titl ...

javascriptjqueryhtml

What is the best way to dynamically load a script using Backbone?

Within a specific view, I am looking to incorporate the following script: <script type="text/javascript" src="https://domain.com" id="hello" name="abc"></script> Is this achievable? ...

javascripthtmlbackbone.js

How to make an entire video clickable on Android for seamless playback?

I have implemented an HTML5 video in my mobile web application. Currently, users need to click the small play icon at the bottom left of the video to start playing it. Is there a way to make the entire video clickable so it plays when clicked anywhere on t ...

javascriptjqueryhtmlvideomobile

Connecting MySQL to HTML: Step-by-step guide

I am currently working on building a website through coding in HTML using gedit. My goal is to have a login or registration feature on the homepage, which will then direct users to their own personalized page on the site. On this page, they should be abl ...

javascriptmysqlhtmlsqlgedit

Using Jquery .ajax to Populate Select Dropdown with JSON Data

I have put in a lot of effort but I'm not seeing any results. My JSON data, created with PHP, looks like this (with the header sent before the data): {"users":[ {"id":"3256","name":"Azad Kashmir"}, {"id":"3257","name":"Balochistan"}, {"id":"3258","na ...

javascriptjqueryhtmlajaxjson

Using CSS grid to wrap three divs simultaneously

Can CSS grid be utilized to style three divs so that they wrap simultaneously when the screen size decreases? This transition: +---------+--+---------+--+---------+ | div | | div | | div | +---------+--+---------+--+---------+ to this: +- ...

htmlcssgrid-layoutcss-grid