What is the best way to position a <div> in the center of a container?

I am currently designing a cart page for an online store, and I have decided to showcase all the items in the cart using a table format. Here is my plan:

https://i.sstatic.net/PJBpo.jpg

My goal is to have the name, quantity, and price of each product displayed in the center of the container. However, my attempts to achieve this with align-content have not been successful:

Could you please review the HTML code and identify what needs to be corrected?

.productRowContainer {
  /* This container holds the products added to the cart */
  width: 100%;
  height: 196px;
}

.cartItemContainer {
  width: 25%;
  float: left;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataContainer {
  width: 100%;
  height: 22px;
}
<!-- Product Row (to be repeated for each item) -->
<div class="productRowContainer">
  <!-- Container for product image -->
  <div class="cartItemContainer">
    <img src="{{ asset('img/iamlush/shop/ShopDark.jpg') }}" style="width: 60%;">
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Name</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Quantity</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Price</p>
    </div>
  </div>
</div>

htmlcss

Answer №1

The property align-items must be specified in the productRowContainer. Also, don't forget to add display: flex to the container.

For future reference, I suggest trying out to experiment with flexbox layouts. It's really beneficial!

.productRowContainer {
  /* holds the products added from the cart */
  display: flex;
  width: 100%;
  height: 196px;
  align-items: center;
}

.cartItemContainer {
  width: 25%;
  float: left;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataContainer {
  width: 100%;
}
<!-- Product Row (will be repeated) -->
<div class="productRowContainer">
  <!-- holds labels for cart -->
  <div class="cartItemContainer">
    <img src="https://via.placeholder.com/196" style="width: 60%;">
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Name</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Quantity</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Price</p>
    </div>
  </div>
</div>

Answer №2

Include height: 100%; in the style of .cartItemContainer to ensure it centers vertically.

.cartItemContainer {
      width: 25%;
      height: 100%; /* Make sure to add this line */
...


.productRowContainer {
  /* Area where cart products are displayed */
  width: 100%;
  height: 196px;
}

.cartItemContainer {
  width: 25%;
  height: 100%; /* Include this line for vertical alignment */
  float: left;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataContainer {
  width: 100%;
  height: 22px;
}
<!-- Product Row (repeats for each product) -->
<div class="productRowContainer">
  <div class="cartItemContainer">
    <img src="{{ asset('img/iamlush/shop/ShopDark.jpg') }}" style="width: 60%; height: 196px;">
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Name</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Quantity</p>
    </div>
  </div>

  <div class="cartItemContainer">
    <div class="dataContainer">
      <p>Price</p>
    </div>
  </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

Does the onChange event fire when the value is modified by the parent element?

let [number, set_number] = useState({x: 1}); <ChildComponent number={number} onUpdate={onUpdateFunction} </ChildComponent> set_number({x: 2}) After running set_number({x: 2}), will this action prompt the execution of onUpdateFunction refere ...

javascripthtmlreactjsmaterial-ui

Recording Node pathways that begin with the hash symbol #

How can I configure my Node/Express routing to intercept a route like /#/about and send it to /about Is there a way for node to handle routes that start with "/#"? It appears to only cut off at the hash mark. ...

htmlexpresshashroutes

Customize the duration of Skeleton animations in Material UI

The <Skeleton> components in mui utilize pulse or wavy animations. Wondering if there's a method to quicken this animation, perhaps by adjusting the duration? ...

javascriptcssreactjsmaterial-ui

customizing the appearance of a plugin

Visit the live site here. I am attempting to customize the text displayed in black under the Upcoming Events section. Despite multiple attempts using different combinations such as .vevent-item odd event-1 .description .event-time .event-label, I have not ...

css

Hide an Angular button when a page is loaded, depending on the information found in a table

How can I hide the Submit button in a table row if a certain condition is met based on information from the database? I attempted to create a function that returns true or false, but it ends up crashing my program because it runs continuously. I also trie ...

javascripthtmlangularjs

The standard color code applied to an HTML button

I need to create an anchor element <a> that resembles an HTML button. However, I am struggling to find the default background color for the input type button. ...

htmlcss

Show and conceal columns in HTML with the help of JavaScript

I need help with a webpage where I want to display a table with 2 columns and two rows (header and body). My goal is to use JavaScript to control the visibility of these 2 columns. The decision to show or hide the columns should be based on the values ...

javascripthtml

Issue with Carousel functionality in Bootstrap 3.1.1

Using Xcart, PHP5.6, and Bootstrap 3.1.1 The objective is to create a carousel that displays 3 items at once and cycles through a total of 5 items. Despite confirming that the necessary libraries are included and in the correct locations, the carousel fa ...

htmlcsstwitter-bootstrapcarousel

What is the best way to customize the Bootstrap CSS for an <a> element?

I recently started a blog and wanted to streamline my design process by using Bootstrap to avoid having to deal with media queries. However, I encountered an issue where the <a> element was displaying as blue. I have another CSS file that is loaded a ...

htmlcssbootstrap-4

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Tips on managing JavaScript pop-up windows with Selenium and Java

There have been numerous solutions provided on Stack Overflow for handling JavaScript windows, but my situation is quite unique. I am currently working on automating a process for our web-based application. The development team recently implemented a MODA ...

javascriptjavahtmlseleniumpopup

Set a maximum height for the <td> element within a table, regardless of the length of the text in neighboring cells

Here is the situation I'm dealing with: In the thread, the postbit (blue box with avatar inside) looks fine for most posts (the first three). However, the fourth postbit is vertically elongated due to longer post content. I have been trying differe ...

htmlhtml-tablerowmybb

comparing values in an array with jquery

I am attempting to retrieve the phone number and mobile number from an array using jquery. jQuery: var data = $('#PhoneLabel').text(); var array = data.split(', '); $.grep(array, function (item, index) { if (item.charAt(0) === &ap ...

javascriptjqueryhtml

Can a different div or HTML element be used in place of the text "Hello World"?

<body onload="myfunction('target')"><div id="target"> "Hey there!" </div></body> Can we replace the text "Hey there!" with another HTML element or div? This is currently a left-to-right marquee text. <script language= ...

javascriptjqueryhtmlcss

Utilize Multidimensional Arrays in HTML

I have a pair of fields called url and id. <input type='url' name='data[web][url]'><input type='number' name='data[web][id]'> <input type='url' name='data[web][url]'><input t ...

phphtmlarrays

Arranging List Items within a Container

What's the best way to align three different elements within a div? The elements are structured in an unordered list: Left, Center, and Right. I attempted to float the right element using float: right, and applied margin: 0 auto with a set width for ...

htmlcssweb

Text not aligning properly when utilizing the <p> tag

I'm struggling to align my text in a row, as shown below: https://i.sstatic.net/SGQ8I.png "Investup" and "Real estate" should be aligned. I need to move the "Real estate" paragraph so that it aligns with the "invest up" paragraph. Here's my co ...

htmlcss

Updating an iframe's content URL

I am currently working on building a website using Google Web Design and everything is going well so far. I have added an iFrame to the site and now I am trying to figure out how to change its source when a button is pressed. Most of the information I fo ...

javascripthtmliframe

What is the best way to incorporate web components into a React Js project?

I am currently unfamiliar with web components. My main goal is to integrate Google Material Components into my React.js project. Google Material Web Component can be found here: https://github.com/material-components/material-components-web Is there a ...

htmlreactjscssmaterial-ui

Beautiful ExpressionChangedAfterItHasBeenCheckedError

I need your help Input field where I can enter a Student email or IAM, which will be added to a string array List displaying all the students I have added, using a for loop as shown below Delete button to remove a student from the array The list has a sp ...

cssangulartypescript