What is the best way to center a form within a parent div?

When hovering over the shopping list, it should expand to display multiple items and the total price. I am looking to position the form in the middle of the cart item. For instance, the Quantity form should be in the middle between Chloe and $14,200. Any assistance in solving this would be greatly appreciated. If there is a simpler way to add an input box for quantity, please inform me.

body { 
background-color: white;
width: 100%;
height: 100%;
margin: 0px;
}

/* Styles the list */
ul.breadcrumb {
padding-top: 16px;
list-style: none;
margin-left: 60px;
}

... (remaining CSS code) ...

#limited-stock {
color: red;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
font-size: 16px;
}
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Elysian</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c071a071b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

... (remaining HTML code) ...

</body>

</html>

Thank you for your help.

htmlcssbootstrap-5

Answer №1

I have successfully implemented this solution by adding CSS at the end of the stylesheet. I recommend structuring your layout using flexbox or grid. You can refer to this helpful guide on Flexbox: or watch Kevin Powell's tutorials on Youtube:

https://codepen.io/plant996/pen/NWJXaNw

      <div class="cart-row-stack">
         <div >Chloé</div>
      <div >
        <input type="quantity" class="form-control" id="quantity- 
        input" placeholder="Qty">
      </div>
      <div>$14,200</div>
    </div>



    .cart-row-stack {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
     }

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

What determines which HTML file is loaded based on the user's browser?

I've been searching online but can't find a definite answer - is it possible to load different HTML based on the type of browser being used? In my specific case, this seems to be the only solution. After trying everything else, it looks like the ...

javascripthtmlloading

I encountered an issue while attempting to retrieve data using route parameters. It seems that I am unable to access the 'imagepath' property as it is undefined

Is there a way to access data when the page loads, even if it is initially undefined? I keep getting this error message: "ERROR TypeError: Cannot read properties of undefined (reading 'imagepath')". How can I resolve this issue? import { Compone ...

htmlangulartypescriptcomponentsrouteparams

Retrieve the text content and identification value from each list item

I've found myself in a frustrating situation where I have an unordered list structured like this: var liList = $("#first").find("li"); var append = ""; for(var i =0; i< liList.length; i++){ var item = $(liList); append += "<option value ...

javascriptjqueryhtml

What is the best way to achieve concave borders in HTML/CSS, similar to the example provided?

Check out this unique graphic created with normal divs in a flexbox layout, courtesy of mode.com. https://i.sstatic.net/hWwhQ.png Ever wondered how this effect is achieved? Upon inspecting the page source, I discovered that there are four elements arrang ...

htmlcssuser-interface

Exploring the art of styling in Angular6

I am looking to change the text color when a specific ID is clicked <nav class="navbar "> <ul class="navbar-nav"> <li *ngFor="let item of items"> <a class="nav-link" >{{item.title}}</a> ...

cssangularhtml

Is there a way to send the values of multiple checkboxes using Ajax and display them in separate div elements?

I have a JSP page with checkboxes. I am trying to retrieve the checkbox values and include them in the data property of an AJAX call. When the AJAX call is made, a div will open displaying the selected checkbox values as follows: fruits: Lichi, Mango H ...

jqueryhtmlajaxspringjsp

Leverage the URL parameter with variables in HTML using AngularJS

I'm facing the same issue as yesterday: trying to extract and utilize parameters from the URL within my HTML page using AngularJS. What am I doing wrong? The parameter I need to work with is: https://url.com/index.html?user I aim to retrieve the "u ...

javascripthtmlangularjs

Implementing spacing to columns in Bootstrap 4

Is there a way to add margin to the "col" element with the class "mr-md-3" without causing any layout breaks within the containing div? .content { height: 200px; border: 1px solid black; } <script src="https://ajax.googleapis.com/ajax/libs/jquery ...

htmlcssbootstrap-4

Can 'fr' units be used in the `calc()` function of CSS?

In this particular scenario, the query arises whether the CSS calc() function extends its support to the fr unit as presented in the below example? .sample-grid { --main-fr: 60fr; grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr ...

htmlcsscss-grid

Numerous text boxes sharing identical IDs

Here is the code snippet that I am working with: <%for (int index = 1; index < 7; ++index) {%> <tr> <td> <div class="indicacao_gdp"> ...

c#htmlasp.netc#-4.0for-loop

HTML input field that shows a hint text when selected

Is there a way to create a text box that shows a hint when clicked on? For example, you can see this feature by clicking on the address text box in the following link: ...

htmlcss

Issue with displaying options in Angular2 v2.4.9 HTML select element

Ever since I made the transition from AngularJS to Angular2, I've been facing a peculiar issue. The select element's options data is fetched from a Solr query, which always returns a 200 response with the data in a timely manner. However, the pr ...

javascripthtmlangular

I am attempting to extract text from an element, but instead of the text, I received a value and am unable to click on it. This particular element is a dropdown button in a Selenium test, with

<div class="select-wrapper initialized"> <span class="caret">▼</span> <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-56a6924e-42d9-1f78-1b82-fe2c1cbdfbdd" value="R3PORTS ...

htmlselenium

The sticky positioning feature seems to be malfunctioning exclusively on mobile devices

I have encountered an unusual issue while working on my cafe-shop menu. Despite finding a solution in a standalone HTML file, the menu doesn't function properly when inserted into one of the pages of my WordPress theme - specifically, it only works on ...

htmlcssmobilepositionsticky

Cutting Out Sections of a List

I'm currently working on an app that involves looking up and navigating to specific locations. I've encountered an issue with the coordinates in my code containing a ',0' at the end, which is not compatible with Google Maps. Manually re ...

javascripthtmlarraysangularjsgoogle-maps

Ways to activate javascript following a PHP submission?

It's a bit tricky to explain. function m(val){ var element=document.getElementById('othermethod'); if(val=='others') element.style.display='block'; else element.style.display=&apo ...

javascriptphphtml

Adjusting the background element of a fullpage.js layout during resizing and customization

Is there a way to make the background image responsive on a fullpage.js page, specifically for mobile and tablet devices? How can I ensure that a specific part of the image stays at the center of the page when resizing? For instance, in the provided imag ...

javascripthtmlcssbackgroundfullpage.js

What is the benefit of utilizing pseudo elements to divide block elements?

I'm seeking clarification on a w3school example that showcases responsive grid design. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: bo ...

htmlcss

Looking for consistent vertical and horizontal scrolling behavior in a React project

I am in need of assistance as I lack the necessary expertise in ReactJs to transform this design. Currently, it is written in Jquery but I would like guidance on how to recreate it in ReactJs. Specifically, I want the left div with the topic for each row t ...

javascriptjqueryhtmlcssreactjs

Bootstrap 4 content block alignment explained

Below is the code snippet I am currently working with: .banner { background: #f9f9f9; width: 300px; height: 60px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" hre ...

htmlcsstwitter-bootstrapbootstrap-4