Flexbox alignment issue: Text is not vertically centered

I'm facing an issue with centering my content vertically. Upon inspecting the divs, I noticed some empty space below them that seems to be causing the problem. When I tried adding <line-height: 3> in the dev tool styles, it seemed to center properly. However, I prefer not to hardcode solutions like this and usually rely on flex properties, but I can't seem to figure out what's wrong this time.

If you require any additional information, please feel free to ask!

.table-page-nav-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
 }

.arrow-btn {
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.page-index-inner {
  text-align: center;
  width: 244px;
  height: 50px;
  border-radius: 4px;
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
  margin: 0px 20px;
}
<div class="table-page-nav-wrapper">
    <div class="arrow-btn"><</div>
    <div class="page-index-inner">Why am I not centering correctly?</div>
    <div class="arrow-btn">></div>
</div>

https://i.sstatic.net/uNmMc.png

htmlcssflexbox

Answer №1

The alignment looks just right. The outer div is perfectly centered vertically. What you need to do now is ensure that the contents inside the div are also centered vertically.

One way to achieve this is by making the inner div a flex container itself. Simply add display: flex to it and then use align-items: center to vertically center the contents. Alternatively, you can set the inner div's line-height to 50px if its height is already fixed. This method works best for text without line breaks.

Answer №2

@DOM has clarified that the code is technically correct.

One common misunderstanding is that flexbox operates only on the immediate inner elements of the wrapping flexbox-container, not on their children or content.

In addition to @DOM's solution, here is a useful CSS helper class for creating centered inner grids. Simply add it to div.table-page-nav-wrapper:

.center_HV,
.center_HV > div {
    display: flex;
    justify-content: center;
    align-items: center;                
}

This also works on line breaks.

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

Tips for postponing an action until the webpage is fully loaded

Currently, I am using Selenium in R to perform a specific task. The script I have written enables the program to search for pizza restaurants near a designated geographical coordinate on Google Maps. The script continues to scroll until all restaurant inf ...

pythonhtmlrxmlselenium-webdriver

Encountered a Three.js error labeled as Uncaught TypeError while trying to follow

I've been following a tutorial on how to integrate three.js into my project from this video: https://www.youtube.com/watch?v=1TeMXIWRrqE I copied the source code provided at the bottom of this webpage: After downloading and extracting the model into ...

htmlthree.js

What steps should I take to ensure this image automatically refreshes once it has been uploaded?

I have granted permission for administrative staff on our ASP.NET website to upload their profile pictures. The process is simple: just use basic file uploading controls: <img src="<%#ImageFile%>" border='0' width="150" alt="" height="1 ...

htmlfile-upload

Creating a PDF document using html2pdf: A step-by-step guide

Currently, I am immersed in a project using React. The main goal right now is to dynamically generate a PDF file (invoice) and then securely upload it to Google Drive. In the snippet of code provided below, you can see how I attempted to create the PDF f ...

javascripthtmlreactjsjspdfhtml2pdf

Every fourth list item, beginning with a designated number

I'm attempting to add a border to specific list items in my HTML. I want the border to start from the 9th child and then continue every 4th child after that. For clarification, I'd like the 9th, 13th, 17th, 21st, 25th... list items to have white ...

csshtml

Adding text with jQuery

Currently, I am utilizing the Jquery text editor plugin known as JqueryTE. While adding some functions to it, I have encountered a roadblock. Specifically, I am attempting to insert additional text into the source of the textarea but have been unsuccessfu ...

javascriptjqueryhtml

Create an interactive webpage that automatically generates new HTML elements after retrieving JSON data from a Web API during page load

I am currently in the process of developing a hybrid Android App using Phonegap/Apache Cordova. The main function of my app is to retrieve data from my web API, which is being served through JSON. I have implemented the following code snippet for this task ...

javascripthtmljsoncordova

The dropdown options for the input type file in Vuejs PWA are not appearing

I have created a Vue.js progressive web app that allows users to easily upload images from their mobile phones. While the app typically functions well, there is an issue where upon downloading the app to the homescreen, the image upload feature sometimes b ...

javascripthtmliosvue.jsprogressive-web-apps

Exploring the World of HTML and PHP

I've recently started learning HTML and PHP. After installing the XAMPP software on my Windows computer, I launched the Apache and MySQL servers and created an HTML file like the one below - however, the PHP code doesn't seem to be executing. Eve ...

phphtmlmysqlapachexampp

Jquery executes b.fn.b.init[102] and displays the output

My task involves selecting multiple elements, all of which have the class "org-box". Within each box, there is a link that I need to capture the href from. Here is my code: $("a.org-box").click(function (e) { e.preventDefault(); var link = $(this).attr( ...

jqueryhtmljquery-selectorsweb

Looking to show an image when a checkbox is ticked and hide it when it is unticked in HTML?

How do I make a specific image appear when a user clicks on a checkbox? I'm unsure if I should use jQuery, Ajax, or another method. What is the best approach for this task? Your assistance would be greatly appreciated. I have successfully created the ...

javascriptjqueryajaxhtml

Guide to utilizing element reference with material UI components in Angular

I am facing difficulty in accessing the reference of an element. My intention is to wrap the material UI elements within a div and set the opacity: 0 so that it remains hidden in the HTML, allowing me to handle the value in my component.ts file. The main g ...

javascripthtmlangular

Ensure all vertically stacked boxes maintain the same height using Flexbox technology

My design includes a series of links styled as larger boxes, with varying content and height. Using flexbox to ensure equal heights on each row is straightforward. I'm utilizing the Bootstrap grid layout, but when the boxes stack vertically (one per r ...

htmlcssresponsive-designflexbox

Creating a unique blur effect on divs using HTML and CSS

Currently working on a website project and facing an issue where I need to apply Gaussian blur within a div. Although opacity can be adjusted, the challenge lies in blurring the text within the div. Seeking assistance for this matter <html> < ...

htmlcss

Tips for ensuring text remains within a div container and wraps to the next line when reaching the edge

Currently, I am working on a flash card application using Angular. Users can input text in a text box, and the text will be displayed on a flash card below it. However, I have encountered an issue where if the user types a lot of text, it overflows and mov ...

javascripthtmlcssangularjs

Ways to access the content of the chosen <td> element using Vue?

I have a dynamic table where I retrieve data using $.ajax() from a database. The content in the rows is editable, and I need to save the changes made with vue.js. After updating the content, an $.ajax() function with 4 parameters (name, client_id, url, and ...

javascriptjqueryhtmlvue.js

Is the use of the auto image attribute height/width impacting rendering performance?

Currently, I am facing an issue with setting the height and width attributes for an image as I do not have access to its dimensions from the server. One solution I am considering is setting both the width and height values to auto. For example: img { ...

htmlcssimage

What is the best way to assign names to images in a Rails application?

When working in html, you can use the code <img class="myimage" src="image.jpg"> to make editing in .css simpler. But what is the equivalent of this when dealing with a .html.erb file? For example, where should I define the class in this <%= imag ...

htmlcssruby-on-railsruby

Is there a way to prevent mouse wheel scrolling on a React "number" input field?

Currently, I am encountering an issue with MUI type="number" textfields. When I focus on the field and then scroll the mousewheel, the input value changes unexpectedly. I have looked into adding a blur function after scrolling to prevent this, but I would ...

javascripthtmlreactjsinputnumeric

Craft a CSS triangle shape from scratch

Looking at the image of a blue triangle, I am curious about how to recreate it using CSS. Would using a background image be the best approach, or is there a way to achieve this with CSS transforms? I noticed the triangle is on the left side but not on the ...

csstransformtransformation