Ways to perfectly align objects in a container without compromising the height of the parent element

Within my container div, I have two spans. An issue arises when I attempt to align the items to the center using align-items: center, as this causes the spans to lose their defined height and border-radius properties. My goal is to keep the heights and border radius intact while simply centering them. Is there a way to achieve this?

CSS for the parent div:

const Container = styled.div`
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 8px 10px 8px;
  height: 70px;
`;

CSS for the child span:

const TextContainer = styled.span`
  padding: 8px 11px;
`;

Before applying align-items: center: https://i.sstatic.net/HTyQW.png

After applying align-items: center: https://i.sstatic.net/4J5nF.png

cssreactjsstyled-components

Answer №1

To align items, you can set display: flex on the span element.

.container {
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 8px 10px 8px;
  height: 70px;
}

span {
  display: flex;
  padding: 8px 11px;
  background: #f00;
  align-items: center;
}
<div class="container">
  <span>Match Rank</span>
  <span>
  <img src="https://i.picsum.photos/id/83/60/50.jpg" />
  </span>
</div>

Answer №2

This issue arises from the use of inline-flex which sets the vertical alignment to baseline.

If you remove the align-items property, it will default to stretch, which may not be ideal in this case.

POTENTIAL SOLUTION:

Have you considered using align-items: flex-start? This could potentially resolve the issue.

ANOTHER SOLUTION:

Alternatively, adjusting the vertical alignment to 'top' might also solve the problem.

const TextContainer = styled.span`
    vertical-align: top;
    padding: 8px 11px;
`;

Please give these suggestions a try and let me know if they work for you. Thank you!

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

Is there a way to align my horizontal menu with the top of the screen without encountering the hover problem?

I'm trying to make my horizontal navigation bar stay at the top of the screen. The issue is that when I set the top property to 0, the menu sticks to the top but the initial menu item is obscured when hovered over. If I remove the top property, the ho ...

phphtmlcss

Exploring the variance in outcomes when directly accessing an AuthService state versus utilizing a function in a React AuthContext

I am currently working on creating an AuthContext, but I am encountering an issue with changing the state of a variable. Here is the code snippet: index.js import Head from "next/head"; import Image from "next/image"; import styles fro ...

javascriptreactjsreact-context

When attempting to extract values from selected items in Nextjs, clicking to handle them resulted in no action

I am facing an issue with my Nextjs project. I am trying to gather values from select items and combine them into a single object that needs to be processed by an API. However, when I click the select button, nothing happens. How can I resolve this issue? ...

javascriptreactjsmongodbnext.js

Why is it that the document updates when I switch to mobile view?

How can I show the number of items in the cart as soon as a user adds an item? Here's the code snippet that checks if there are more than one item in the cart and displays it: {this.state.inCart.length > 0 ? ( <div className="in-cart-e">{thi ...

htmlcssreactjs

The current state is combining with the new state to create a duplicated rendering

I'm struggling to understand why my component is rendering both the previous prop and the new prop instead of just the difference. For instance, it currently outputs: [[1, 2, 3, 4, 5]] [[6, 7, 8, 9, 10]] [[1, 2, 3, 4, 5]] [[6, 7, 8, 9, 10]] [[16, 5 ...

reactjsredux

Is there a way to control the quantity of items that can be dragged to the drop area with dragula?

I'm struggling with a drag-and-drop issue that involves limiting the number of elements in a drop-area to two. I am using the dragula library for this task: If there are fewer than two elements in the drop-area, allow adding a new element from the dr ...

javascripthtmlcssdragula

Why isn't my CSS button changing color on hover?

div ul li a.button:hover { text-color:#FF0000; background: #0040FF; } I have been attempting to create buttons that change color and text when hovered over. Despite trying different methods, the changes do not seem to be taking effect. Below is the co ...

htmlcss

Issues with arranging DIV elements using CSS

I have organized a few DIVs within a parent DIV. I am trying to make them align horizontally, but despite my efforts, they remain stacked vertically. Here is the code snippet: <style> #entrycontainer { height: 100px; width: 500px; } #entry ...

csshtml

The iframe remains unresponsive and fails to resize as needed

I am facing an issue while trying to embed an iframe into one of my websites. It seems that the responsiveness is lost and it does not scale properly on mobile devices. You can see the issue here. Interestingly, when I place the same iframe on a plain HTM ...

cssiframemobileresponsive

A step-by-step guide on incorporating alignment styles in react-quill

Utilizing the npm package react-quill in my Next.js project, I am dynamically importing it and using the create-next-app boilerplate. While I have successfully integrated the react-quill editor, I am facing issues with retaining image and paragraph styles ...

reactjsnext.jsserver-side-renderingreact-quill

Inconsistency with Mobile Viewport Problem

Apologies for the chaos below, but I've spent quite some time attempting to fix this on my own. It's time to surrender and seek assistance! Here are some screenshots to illustrate the issue: The problem is that sometimes the webpage functions c ...

javascriptjqueryhtmlcssmobile

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

htmlcss

Inconsistent Animation Issue with jQuery Toggle for Expanding Div and Text

My expanding div functionality is almost perfect, but I've noticed that the transition when opening abruptly on divs with text. However, the closing transition is smooth. Can anyone help me make the opening transition as smooth as the closing one? Bel ...

javascriptjqueryhtmlcss

Issue: The function is attempting to use the React Hook "useState" inappropriately

After updating the navbar on my NextJs site and making changes to the header, I encountered a build error that I couldn't resolve. The error message can be seen here: https://i.sstatic.net/jjXJG.png I tried researching and tweaking the code, especial ...

javascriptreactjsnext.jsjsx

Can conditional statements be utilized within a React component?

Using Material UI, the CardHeader component represents the top part of a post. If the post is created by the user (isUser = true), I would like to display two buttons on the post. Is this achievable? <CardHeader avatar={ <Avatar sx={{ ...

javascriptreactjsmaterial-ui

Can CSS interfere with the execution of the document ready function?

When I have a large CSS file on my page, will my document.ready execution wait for the CSS file to load? <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="large-amount-file.css"> </head ...

jqueryhtmlcss

The link tag seems to be malfunctioning in my ReactJs application, resulting in a

Working on integrating a bootstrap navbar in my React JS app. I encountered an issue where the screen would not display anything, not even the navbar itself. However, upon further investigation, I found that replacing the 'Link' tag with an &apos ...

reactjsnavbarreact-bootstrap

When I compile my module in Webpack, the CSS does not get compiled

I'm currently working on developing a draftjs editor module using react, ES6, and webpack. It's running smoothly, but I've encountered an issue when building the project - my JavaScript files are compiled by Babel as expected, however, the C ...

reactjswebpackbabeljs

Having difficulty accessing the key values from an Object

This piece of code utilizes Axios to fetch data and store it in the myObject variable: const myObject = {} Object.entries(keysParameter).map((entry, index) => { axios .get(url) .then((res) => { myObject[entry[1].value] = re ...

javascriptreactjsaxios

What is the best way to arrange the elements vertically within a flex container?

In my current code snippet, I have the following setup: <section class="body1"> <h1 class="text1">Tours around the world</h1> <h3 class="text1">Great experiences</h3> <form action="/respuestaUsuario/"> ...

htmlcssflexbox