centering items throws off the parent's height

I am working on creating a carousel-like feature that can be moved using a scrollbar. Each slide in the carousel contains a single line of text that needs to be centered both horizontally and vertically. When I use align-items: center, it alters the height of the parent div.

.carousel {
  width: 100%;
  background-color: #dbdbdb;
  overflow-y: visible;
  overflow-x: auto;
  white-space: nowrap;
}

.carousel .slide {
  display: inline-flex;
  width: 250px;
  height: 150px;
  margin: 10px 10px 10px 10px;
  background-color: #FFF;
  font-weight: bolder;
  font-size: 15px;
  white-space: pre-wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align-last: center;
}
<div class="carousel">
  <div class="slide">Lorem ipsum dolor</div>
  <div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
  <div class="slide">consectetur, adipisci</div>
</div>

Removing the align-items property solves the issue with the height adjustment. How do I fix this problem?

htmlcssflexbox

Answer №1

The issue is not with align-items: center. That part is functioning correctly.

The real problem lies in the fact that your flex container is set as an inline-level box (display: inline-flex), which triggers the default setting of vertical-align: baseline.

When the middle item spans two lines of text, the box adjusts its baseline to align with its adjacent siblings. (You can observe how all boxes align perfectly when they only contain a single line of text.)

To resolve this, simply override the default setting by adding vertical-align: bottom.

.carousel .slide {
    vertical-align: bottom;
}


.carousel {
  width: 100%;
  background-color: #dbdbdb;
  overflow-y: visible;
  overflow-x: auto;
  white-space: nowrap;
}

.carousel .slide {
  display: inline-flex;
  width: 250px;
  height: 150px;
  margin: 10px 10px 10px 10px;
  background-color: #FFF;
  font-weight: bolder;
  font-size: 15px;
  white-space: pre-wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align-last: center;
  vertical-align: bottom;  /* NEW */
}
<div class="carousel">
  <div class="slide">Lorem ipsum dolor</div>
  <div class="slide">quisquam est qui dolorem ipsum quia dolor sit amet lorem ipsum</div>
  <div class="slide">consectetur, adipisci</div>
</div>

Additionally:

  • The issue disappears once you remove align-items: center because the default value of stretch allows the text to align at the baseline (i.e., first line) across all boxes regardless of text length (see demo)
  • flex-start could also be used (see demo)
  • flex-end, however, would not yield the desired result (see demo)

For further insights on vertical-align: baseline, refer to:

  • Why is there a vertical scroll bar if parent and child have the same height?

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

Sticky sidebar panel featuring a stationary content block

I have a sidebar that is set to position:fixed; and overflow:auto;, causing the scrolling to occur within the fixed element. When the sidebar is activated, the element remains static on the page without any movement. My goal: I am looking to keep the .su ...

javascriptjqueryhtmlcss

The alignment of the Bootstrap navbar dropdown is set to the right side

I'm seeking assistance with my navbar code which includes some PHP scripts. The issue I'm encountering is that the text is aligning to the right, and I haven't been able to find a solution for it yet. I will upload the CSS file later after p ...

phpjqueryhtmlcsstwitter-bootstrap

Which is more effective: Layering multiple canvases in the DOM or consolidating all drawing on a single canvas?

In my previous projects, I have had experience working with layered canvases. While some of my colleagues swear by this approach, I find myself skeptical about its effectiveness. My primary concerns are: If multiple canvases are layered and one undergoes ...

javascripthtmlcanvas

Position the text to line up perfectly alongside the floating image

How can I use the float property to align text and images? The text marked in red should be positioned next to the floating image, but for some reason I am having trouble getting it in the right place. https://i.sstatic.net/gfuu6.png This is my CSS for t ...

cssalignment

The top border is not visible on the entire length of the navigation bar on smaller screens

Link to the website in question: website The navbar links collapse into a hamburger menu dropdown on smaller screens, and I have added a CSS property for the top border .navbar { border-top: 3px solid rgba(55,175,75,1.00); }. However, when the screen siz ...

htmlcssbootstrap-4

Removing CSS from an HTML document using Gulp

My Web App is built using Angular and I encountered an issue with Gulp. Every time I add a new custom CSS line to my HTML file and run Gulp, it automatically removes that line from the file. <!--MATERILIZE CORE CSS--> <link h ...

htmlcssangularjsgulpmaterialize

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

It is truly satisfying to be here working on developing a private message inbox for my website, especially after successfully implementing a complete user signup/login and activation system. A few months ago, I never believed I had enough patience to grasp ...

phpjavascriptjquerymysqlhtml

Use jQuery to locate the active class within a specific list item and then transfer that class to a different item within the

I have a pair of indicator lists for a bootstrap carousel First List: <ol class="rightci carousel-indicators"> <li class="active" data-target="#carousel-example-generic" data-slide-to="0" ></li> <li data-target="#carousel-example-g ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way for me to choose all the classNames that conclude with a specific word within the MUI sx property?

I am currently working with MUI and I have a need to modify certain properties that are prefixed with random IDs. How can I target, for instance, the first one using: '& endsWith(MuiAccordionDetails-root)' I wish to achieve this because the ...

javascriptcssreactjsmaterial-ui

Setting border radius for the first child of li dynamically using Javascript

I am currently working on creating a navigation bar that features rounded corners for the first and last children within an unordered list. My goal is to utilize the onclick javascript function to dynamically assign these rounded corners directly in JavaSc ...

javascriptdynamiccss

Ways to eliminate white space in bootstrap CSS menu bar

My goal is to create a responsive navigation bar using Bootstrap and customize it to fit my design needs. Although I was able to implement the dropdown on mobile-sized windows, I encountered a margin issue that I couldn't remove on the right side. I ...

htmlcsstwitter-bootstrap

Frame Tweet Integration

Attempting to create an iframe modal with a Twitter share source. <iframe src="https://twitter.com/share" class="tweetFrame"></iframe> The current setup is not functioning properly, resulting in a blank page. Is there a workaround to ensure t ...

html

Creating your own unique CSS animation or transition timing function is a great way to add a

When it comes to CSS timing functions, they often appear to exist between two specific points: https://i.stack.imgur.com/qyvON.png Even with the option of using custom bezier curves, the curve created can only transition from one point to another. https ...

cssanimationcss-transitionscss-animationseasing-functions

Troubleshooting issues with Jquery fadeIn and fadeOut - tips for implementing fadein animation using addclass and mouseover

My concept involves a shop menu displayed as a list: <li class="shop-menu"><a href="{{url('shop')}}">shop</a></li> When the shop-menu is hovered over (using a mouseover jquery function), I aim to make a div named shop-m ...

htmljquerycssanimation

Email Template Concern

I have been encountering an issue with my Windows Application as it sends email using Email template images. However, when sent to a different SMTP server, the result is not consistent - it attaches the template images as attachments. Currently, I am util ...

htmlvb.nethtml-email

utilize the Aspose library in Java to seamlessly convert HTML files into PowerPoint (

I have a Java variable that contains HTML code. I want to utilize the Aspose library to execute and render this HTML code into a PowerPoint presentation, with the CSS reference included. It would be great if the resulting PowerPoint is editable. ...

javahtmlpowerpointaspose

Using PHP's explode function to convert JSON output into an array

Hello, I received a JSON output from an API which contains information about pet adoption. The data includes details like the adoption process and personality of the animals. {"listings":[{"adoption_fee":"$200","adoption_process":"For cats, please fill ou ...

phphtmljsondecodeexplode

Creating a visually balanced footer in your webpage is essential to providing a cohesive design. Learn how to perfectly align left

Struggling to align my footer text in a straight line. As a beginner, I hope this question isn't too basic! Check it out below: https://i.sstatic.net/ZophZ.png I want those three lines to be in perfect alignment. I've been taught a grid method ...

htmlbootstrap-4footerstyling

What is the best way to place text beneath an input field?

Although it may seem simple, I am new to this and could use some help. I have an input box: <input type="text" name="username" id="username" class="form-control" value="{{username}}"> <div class="error" id="nameErr"></div> I have a func ...

javascriptcssnode.js

How can I generate an SQL query using the <options> tag and display the result through echoing

I am in the process of creating a page that will show users the cost of repairing their damaged mobile phone. With a database containing all the pricing information for various phone models and issues, I need to figure out how to display the final price af ...

phphtmlmysqlsqldatabase