Step-by-step guide on positioning a div below another div and centering both elements horizontally

Trying to center the "input" div below the "InputBelow" div using "flex-direction: column" is causing issues with "justify-content; center."

The goal is to center the main "border" div in the middle of the screen and align the other elements inside it.

.border {
            height: 300px;
            width: 700px;
            margin: auto;
            position: absolute;
            bottom: 0;
            top: 0;
            right: 0;
            left: 0;
            border: 3px solid;
            border-radius: 45px;
            border-color: black;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        .calcText {
            color: black;
            font-size: 44px;
            margin: 35px;
        }

        .value {
            height: 10px;
            width: 50px;
        }
<div class="border">
            <div class="calcText">Input Below</div>
            <input class="value" type="text">
        </div>
htmlcss

Answer №1

Big shoutout to Amaury for providing the solution. I mistakenly believed that align-items was used for vertical alignment, while justify-content was for horizontal alignment. It turns out that I needed to eliminate justified content.

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

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...

javascripthtmlcssangularjsangular-material

Make the most of your Bootstrap 3 layout by utilizing a full page container that fills both the width and height between a fixed header and

I am currently working on a basic bootstrap page with the Example template from Bootstrap's website. I want the content in the middle to take up the space between the header and footer, while ensuring that both the header and footer remain visible at ...

javascriptjqueryhtmlcsstwitter-bootstrap

What steps should I take to create a functional image scrolling effect similar to the one shown in this example?

Recently, I came across and was intrigued by the "image slide effect" featured on their homepage. The way the background image changes as you scroll up, leading you through different introductory slides before reaching the main content of the site caught ...

javascriptjqueryhtmlcss

Simplified jQuery function for multiple div mouseover operations

Uncertain about the accuracy of my title. Due to certain reasons, I need to assign different IDs for the class, as it only detects ID and not class when hovered over. Therefore, I have created a CSS version where the opacity of a specific div will change t ...

javascriptjquerycsshovermouseover

Mastering the Art of Restricting an IP Address Range with FILTER_VALIDATE_IP

In order to restrict access to certain resources, I need to implement a system that filters IP addresses. To validate the IP address, I currently use FILTER_VALIDATE_IP and filter_var. However, I am facing an issue where the starting and ending IP address ...

phphtml

When I try to add more content to my page, it doesn't extend beyond a single page and instead gets compacted together

As a beginner in the world of coding, my goal is to create a time management website specifically tailored for school use. Despite copying this code multiple times, I have encountered an issue where it does not continue down the page, and I am unsure of th ...

javascripthtmlcssbuttoninput

Animations with absolute positioning not rendering correctly in Safari

I recently created a basic animation that involves setting an element to "position: absolute" in order to translate it. Everything functions perfectly as intended on Chrome, however, when testing it on Safari, the absolute positioning seems to be completel ...

htmlcssgoogle-chromeanimationsafari

Creating an animated background slide presentation

After creating a button group, I wanted the background of the previous or next button to move/slide to the selected one when the user clicks on it. I achieved this effect using pure CSS and simply adding or removing the 'active' class with jQuery ...

javascriptjqueryhtmlcss

Is there a way to remove any incomplete information from the output (window.alert) in JavaScript when a user does not fill in all the prompts?

I am seeking input for 8 pieces of information to be displayed in an alert box, only if the user enters something in each field. All the gathered data will be shown in a single alert box once the user confirms their desire to review it. If the user choos ...

javascripthtmlnull

Retrieving the XML data from an uploaded file using PHP

How can I upload an XML file to my server and extract its content? Step 4: Writing each row from the XML file into a database. This is my current attempt: xml_import.php <?php if(isset($_POST["submit"])){ echo "Let's test"; $uploaddir ...

phpxmlhtml

The Zurb Foundation has a multitude of redundant CSS entries

I have been utilizing Zurb Foundation for a while now, with a bower + compass setup as outlined in the documentation here. Recently, I encountered an issue where a specific page was loading slowly. Upon investigating, I discovered that there were numerous ...

csssasszurb-foundationcompass-sass

Check out this stylish Twitter-inspired SVG text counter created with a combination of CSS and jQuery! See it in action here: https://jsfiddle.net/moss24

Looking to develop a text counter similar to Twitter that increases the width in green color up to 75%, then switches to yellow until 98%, and finally turns red if the input value is greater than or equal to 400. It should also add a "highlight" class when ...

javascriptjquerycss

When I use .fadeToggle, my div transitions smoothly between visible and hidden states

Looking to create a sleek navigation menu that showcases a colored square when hovered over? I'm currently experiencing an issue where the squares are not aligning correctly with the items being hovered. Switching the position to absolute would likely ...

javascriptjqueryhtmlcsshover

Improve the readability of a series of string.replace statements

When dealing with HTML code in Python, special characters need to be replaced using the following lines of code: line = string.replace(line, "&quot;", "\"") line = string.replace(line, "&apos;", "'") line = string.replace(line, "&amp ...

pythonhtmlstring

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js

Saving HTML elements within an XML file

I am dealing with a String that has an html format containing various html tags. My goal is to enclose this string within xml tags while preserving the html tags, for example: public class XMLfunctions { public final static Document XMLfromString(Str ...

javahtmlxml

Utilizing Selenium to extract data from a table and displaying the results

I am looking to scrape tables from a specific website, but I am new to automation with Selenium. Here is the code snippet that I have come up with after doing some research: from selenium.webdriver import Firefox from selenium.webdriver.common.by import By ...

pythonhtmlcssseleniumpycharm

Could you explain the distinction between push and offset within the grid system?

I'm currently diving into the world of Bootstrap grids and trying to wrap my head around the concepts of push and offset. In the showcase below, I have two rows that only differ in how the third column is positioned - one using a push and the other an ...

csstwitter-bootstrapuser-interfacetwitter-bootstrap-3

Numerous covert fields within HTML

I am currently working on a popup dialog box where I need to include a set of values in hidden format. However, when I retrieve the value through AJAX post, only the last value is returned. In my PHP code snippet: $plan_ids=array(); foreach($test_plan as ...

phphtmlajax

What causes the discrepancy in smoothness between the JavaScript animation when offline versus its choppiness when online, particularly on AWS

Recently I delved into game development using HTML5/CSS/JS and embarked on a small project. Check out the game here at this AWS storage link: If you open the game and press SPACE, you'll notice that the ball starts moving with occasional brief pauses ...

javascripthtmlanimationamazon-web-servicessmoothing