Tips for vertically centering elements in the header using flexbox

Within the header of my website, I have structured 3 separate divs - one for a logo, one for a search input, and one for a cart link. My goal is to align these 3 .col-md-4 divs in a vertically centered position.

While these divs currently have an align-items-center class, it seems that they are not being vertically centered as I intended.

<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
                <a href="#" title="" class=""><img src="images/assets/logo.png" alt="" class="img-fluid"</a></a>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="Search for products..." aria-label="Recipient's username" aria-describedby="basic-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button">Search</button>
                  </div>
                </div>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
                <a href="#" title="" class=""><b>Cart</b></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

I've attached a snapshot showcasing how the current header appears. You can view it with the grey border at the bottom https://i.sstatic.net/nRW3F.png.

htmlcssbootstrap-4flexbox

Answer №1

Centering items vertically: Just using align-items: center; is not sufficient for vertical centering if the height is not defined. Essentially, you need to specify the header height as 100% of the page for it to be centered vertically. Refer to the example below:

body {
    height: 100vh;
}

.header {
    height: 100%;
}

.container {
    height: 100%;
}

.row {
    height: 100%;
    display: flex;
    align-items: center;
}
<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
                <a href="#" title="" class=""><img src="images/assets/logo.png" alt="" class="img-fluid"</a></a>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="Search products..." aria-label="Recipient's username" aria-describedby="basic-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button">Search</button>
                  </div>
                </div>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
                <a href="#" title="" class=""><b>Cart</b></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

Answer №2

To enhance your flex container, just make a simple addition:

.row {
align-items: center;
}

It would be even better if you identify a more precise class (such as adding the classname "center" and targeting ".row.center")

Answer №3

Your solution is spot on, but there seems to be an issue with the height of the row being determined by the tallest child element (such as the logo div). To address this, simply set the row height manually and all elements should align properly. Check out this Codepen for reference.

.header .container .row { 
  height: 200px;
  background-color: grey;
}

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

My DIV elements are not adapting to the row and column breakpoints as expected. Can anyone help me understand why this is happening?

Currently, I am working on setting up a row of highlighted products on my website. It displays fine with 5 products on desktop view, but the challenge arises when it comes to viewing it on medium size devices where I want only 2 products to show, and event ...

htmlcssbootstrap-4grid-layout

Can the navbar brand be centered in Bootstrap 4 while also aligning some text to the left of the brand?

Just dipping my toes into website coding and Bootstrap is a whole new territory for me. I'm struggling with centering the brand in the navbar while keeping the text aligned to the left of it. So far, every attempt results in both elements being center ...

htmlcssbootstrap-4navbarcenter

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

javascripthtmlcsspopup

Maintaining CSS elements in position

Hello everyone, I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in t ...

htmlcss

Is the div height set to 100% until the content surpasses the height of the browser window

Is there a method to make a div fill 100% of the available page height, until it contains enough content to require a scrollbar? // For example, if the browser height is 600px: <div> // Initially empty, so it will be 600px tall. </div> . ...

htmlcss

React - Styling with Pseudo Element on Input Element not displayed properly

I'm struggling to understand why an ::after element is not displaying on an input element, but is working fine on a div. I'm attempting to create a performance-friendly focus effect for an input element, where it glows when in focus using the af ...

cssreactjspseudo-element

Using Java beans to present form data utilizing session

How can I utilize Java Beans and session beans to store user input data and display a preview of the entered details on the next page? I have already created a servlet using JSP, but now I want to incorporate Java Beans to showcase the form data. How shoul ...

javascripthtmljquerycssjavabeans

What is the best way to incorporate data from a foreach method into a function call within an HTML string?

Having trouble calling a function with data from a foreach loop while generating HTML cards and buttons from an array. The issue seems to be in the renderProducts() method. /// <reference path="coin.ts" /> /// <reference path="prod ...

javascripthtmltypescriptloopsoop

Attempting to adjust the width upon hovering with CSS

I have attempted this previously and cannot figure out why it is not functioning properly. I am attempting to do the following: http://jsfiddle.net/geometron/u3M6r/1/ <ul> <li><a href="content1.html"> Demo 1 </a></li> ...

cssanimation

Container filled with a table element

My challenge involves a container grid with 3 div flex subelements. The first is the fixed header, the second is the body, and the third is the fixed footer. Within the body, there is a table. What I want to achieve is that when I resize the window, the ta ...

htmlcssflexboxoverflowcss-grid

Guide to turning off the pinch-zoom feature on Windows 8 laptops

I'm currently working on a Windows 8 desktop application where I am using C#, JavaScript, and HTML5. Specifically in the C# portion, I am utilizing the WebView object. My goal is to disable pinch-zoom within my application. I already know how to achi ...

c#htmlinternet-explorerwindows-8internet-explorer-10

Discover an element using Python Selenium

Can someone assist me in finding a way to click on an image using Python's Selenium? I am trying to locate a div with the class "A" that contains another div with the class "B", and then, click on the img within the div with the class "D" <di ...

pythonhtmlselenium

Remove Chosen Pictures (Checkbox/PHP/MySQL)

I am currently displaying images from a Database using the following HTML code: <li> <input type="checkbox" id="1" /> <a rel="gallery_group" href="images/big/1.jpg" title="Image 1"> <img src="images/small/1.jpg" alt="" ...

javascriptphpjqueryhtmlmysql

What is the process of utilizing a <li> for a hover selector in jquery?

I've encountered an issue with a list that I am trying to modify its content when hovering over them. Despite using the id as a selector for triggering the hover function, all list items change color instead of just the intended one. The challenge lie ...

jqueryhtmlcss

Combining multiple images into one CSS image sprite to create 4 clickable

Could someone please review this segment of the CSS to ensure its accuracy? CSS #nav-list { list-style-type: none; background-repeat: no-repeat; background-image:url("../_img/Footersprite.png") } #nav-list li, #nav-footer a { height: 40 ...

htmlcss

Basic HTML Audio Player Featuring Several Customizable Variables

I have a unique API that manages music playback. Instead of playing audio in the browser, it is done through a Discord bot. Achievement Goal https://i.stack.imgur.com/w3WUJ.png Parameters: current: indicates the current position of the track (e.g. 2:3 ...

javascripthtmlcssangular

Overflow issue with Bootstrap 4 Navbar collapse and Express/Node partial

Hey everyone, I'm currently facing an issue with the navbar collapse feature from Bootstrap and could really use some help. My tech stack includes Express, Node, and Handlebars, where the header is a partial. The problem I'm encountering is that ...

node.jsexpresshandlebars.jsbootstrap-4

Issue with CSS pseudo-elements :before and :after in Internet Explorer

I am attempting to create a heading with lines on both sides, but I am facing an issue where it only seems to work on the left side in IE. Check out the code here h2 { position: relative; overflow: hidden; text-align: center; } h2:before, h2:afte ...

htmlcssinternet-explorer

Is it possible to override the body width setting?

Is it possible to override the width of the body element? For example, consider the following: <body> <table id="table1"> <tr><td></td></tr> </table> <table id="table2"> <tr><td></td>& ...

jqueryhtmlcss

The Window.print() function may experience compatibility issues across different browsers

When attempting to utilize the Window.print() function, I encountered an issue where it works perfectly in Google Chrome but not in Mozilla Firefox. Attached are screenshots displaying the problem at hand. What could be causing this discrepancy? Furthermor ...

javascriptcss