Center elements with CSS

When my window is at full width, my items are displayed like this: https://i.sstatic.net/sjtxC.png

However, when I resize the window, the Submit button moves up. https://i.sstatic.net/zfH73.png

I am looking for a way to keep it evenly centered. Can someone help?

Below is the code snippet:

<form>
  <div className="row">
    <div className="col-sm-3">
      <label>
        Name:
        <input type="text" name="name" />
      </label>
    </div>
    <div className="col-sm-3">
      <label>
        Phone:
        <input type="text" name="name" />
      </label>
    </div>
    <div className="col-sm-3">
      <label>
        Email:
        <input type="text" name="name" />
      </label>
    </div>
    <div className="col-sm-3">
      <input type="submit" value="Submit" />
    </div>
  </div>
</form>

This piece of code belongs to a react component, which is why it uses className.

Answer №1

One option is to use Flex Box with justify-content: space-between;

  1. Learn more about Flex Box here

  2. Alternatively, you can explore Css grids and utilize

    grid-template-columns: repeat(4, 1fr);

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

NewbieCoder is requesting clarification on the JQUERY smoothscrolling code, can anyone assist?

Can anyone provide an explanation of the functionality of the following JavaScript code? Specifically, I would like a breakdown of each line in this smooth scrolling API. $('a').click(function(){ //upon 'a' click, execute th ...

Bootstrap columns stacking in a disorganized manner

I'm struggling to correctly stack my columns using bootstrap. The image shows that I need the black box to be positioned below the green box, but I can't seem to get it right: https://i.sstatic.net/7bvN6.png This is the code I have been using: ...

CSS magic: reveal on hover!

New to coding and encountering a challenge with my hand-coded website. My goal was for a div to change into an arrow when hovered over since the div acts as an anchor link. However, during the build process, only the paragraph inside the div responds to m ...

Creating a Mui v5 grid item that maximizes its height within a dialog box

I need help setting the height of a Grid Item to occupy all available space in a MUI dialog. In the image below, I am trying to make the Left Side Panel, Main section, and Right Panel extend to fill the orange-colored dialog space. https://i.sstatic.net/ ...

Display updated text on hover over button panel

Is it possible to achieve the following using only CSS without any JavaScript? The desired outcome is a div containing two font awesome icons aligned to the right side. Specifically, I am looking for: - Icon of a pen that reacts on mouse hover - Icon o ...

Strategies for Increasing Index Values in JavaScript

I attempted to modify the data attribute in my code snippet below. After clicking on the square, the data attribute should be incremented. However, it appears that the incrementing is not happening as expected. How can I resolve this issue? Additionall ...

Organize your table with CSS styling

Looking for a way to rearrange a table with 2 columns after every 2 rows so that the lines continue on the right side? Check out the example below: [1][2] [1][2][5][6] [3][4] => [3][4][7][8] [5][6] [7][8] Wondering if this can be achieved using o ...

Tips for navigating through lengthy webpages using the jQuery onepage-scroll plugin

I recently came across a fantastic plugin called onepage-scroll that almost perfectly fits my requirements. However, I have encountered an issue. Some of my pages, defined within <section> tags, are larger than a single screen. Is there a way to cust ...

How can I implement image visibility toggling on click with AngularJS version 1?

My goal is to create a feature where clicking on an image will bring it to the front, hiding all other images behind it. I have found a code reference for achieving similar functionality using jQuery. Click on image to move to front? Can anyone provide ...

Experiencing issues on the live server as it appears that Bootstrap is not functioning properly

I am facing an issue with my website where it appears distorted when launched on a live server, despite working fine locally. It seems that the Bootstrap styles are not being applied correctly on the live server and I cannot figure out why. If anyone knows ...

What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause. Below is the content of my app.js file: import './App.css'; import {BrowserRouter as Router, Routes, Route} from ...

I am interested in implementing a logout feature using a button in PHP

<?php session_start(); ?> <form> <input type="button" id="logout" value="logout" name="logout"> </form> After initializing the session during login, I am seeking to terminate it using a button rather than via <a href="">l ...

What is the best way to completely stretch 2 embedded div elements?

Is there a way to stretch two <div> elements to be 50% wide? Here is a jsFiddle with the solution. HTML <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> CSS di ...

Display an Asterisk Icon for md-input fields with lengthy labels

Documentation states that md-inputs add an asterisk to the label if it is a required type. However, when input containers have width constraints and long labels, the label gets truncated and the asterisk becomes invisible. From a user experience perspectiv ...

Adjusting the width of a Material UI select/dropdown component

In my material-ui grid setup, each <Grid> contains a <Paper> element to define the grid's boundaries precisely. Inside every <Paper>, there is a custom <DropDown> component (a modified version of Material-UI's Select). I ...

The issue of overflow-y not functioning properly in conjunction with ng-repeat has been observed

As indicated in this resource, setting a fixed height for the div is suggested, but it seems like it's not working with the code provided below. <div style="margin-top:0.5vh;"> <div style="height:200px;border:1px solid red;overflow:au ...

Struggling to locate text within the confines of the meta viewport

So I'm new to this whole blogging thing and I wanted to make sure my site was responsive. I added the meta viewport tag, but when I tested it out on Google Chrome with different window sizes, my text just disappeared! Here's a snippet of the CSS ...

Designing a solid sidebar of a specific width alongside a flexible container for content that adapts to different screen sizes using

I have a sidebar that is fixed at 200px on the left side of the page, and a responsive content container on the right side. To center the content in the right container, I used the following CSS: .sidebar { width: 10%; position: fixed; height: 100%; bac ...

The color of Bootstrap badges is not displaying properly when used with Ruby on Rails

I am attempting to change the color of the text "true" or "false" based on their values. If the value is true, I want the label to display in green. If the value is false, I want the label to display in red. I included this code in my index.html.erb file. ...

Struggling to incorporate a radio button into my table design, despite attempting various CSS adjustments without success

After adding a radio button element to my table, I noticed it was not appearing on the page. To troubleshoot, I created a snippet with the same code and found that the radio button did show up there. Additionally, when I added a background color to see whe ...