How to perfectly align the div input element using html and css

I am struggling to center align the input type elements while keeping them equally aligned. Although I have managed to align the input types equally, they are currently left aligned. My goal is to have them center aligned.

.container {
    width: 500px;
    clear: both;
}
.container input {
    width: 100%;
    clear: both;
}
<div class="container">
    <label>EMP ID </label><input type="text" id="empid"> <br><br>
    <label>EMP NAME</label><input type="text" id="empname"> <br><br>
    <label>EMAIL ID</label><input type="text" id ="emailid"> <br><br>
</div>
<input type="submit" class="appButton" value="INSERT" onclick="insert();"> <br><br>

csshtml

Answer №1

Adding a wrapper class around your label and input is crucial for maintaining flexibility in the markup structure. This will allow you to easily replace the label and input with other components in the future by simply placing them within this wrapper, resulting in a more semantic and organized layout.

.container {
  width: 100%;
  clear: both;
}
.container input {
  width: 200px;
  clear: both;
}
.container label {
  display: block;
}
.wrapper {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
}
<div class="container">
  <div class="wrapper">
    <label>EMP ID</label>
    <input type="text" id="empid">
  </div>
  <div class="wrapper">
    <label>EMP NAME</label>
    <input type="text" id="empname">
  </div>
  <div class="wrapper">
    <label>EMAIL ID</label>
    <input type="text" id="emailid">
  </div>
  <div class="wrapper">
    <input type="submit" class="appButton" value="INSERT" onclick="insert();">
  </div>
</div>

Answer №2

To align your input container in the middle, apply this css:

.box {
    margin: 0 auto;
    width: 600px;
    clear: both;
}

Breakdown: The margin property controls the outer spacing of an element. By setting a fixed width for the element, you can use the auto value to center it horizontally. The 0 specifies no vertical space around the element.

Answer №3

Perhaps a design like this could work?

    <style>
.container
{
    width:600px;
    clear:both;
    margin:30px auto;   
}

.container input[type="text"]
{
    width:90%;
    padding:0 3%;
    height:28px;
    display:block;
    font-size:16px;
    margin-bottom:16px;
    border:1px solid #999;  
}

.container input[type="submit"]
{
    width:35%;
    height:36px;
    font-size:17px;
    margin-top:16px;
    border:1px solid #999;
    border-radius:5px;
    background: -webkit-linear-gradient(#ffffff, #bbbbbb);
    background: -moz-linear-gradient(#ffffff, #bbbbbb);
    background: linear-gradient(#ffffff, #bbbbbb);  
}

input[type="submit"]:hover, input[type="submit"]:active
{
    box-shadow:inset 0 3px 4px rgba(0,0,0,0.1);
    cursor:pointer;
    text-decoration:underline;

}

*:focus
{
    outline:none;   
}

</style>

<div class="container">         
<label>ID Number</label><input type="text" id="idNumber"> 
<label>Full Name</label><input type="text" id="fullName"> 
<label>Email Address</label><input type="text" id="emailAddress">
<input type="submit" class="submitButton" value="SUBMIT" onclick="submitForm();">      
</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

Adjusting the size of a v-image in Vuetify to perfectly fit the screen dimension

I have a photo gallery on my Vue page, and when a photo is selected, a dialog pops up by setting the selectedCard. However, the image does not fit the size of the screen and only half of it is visible. I have tried setting the CSS with max height or widt ...

cssvue.js

Automatic panning of JavaScript on a map

Having some issues with the functionality of the pan function. It's working, but not quite how I need it to. Currently, I have a logo overlaying a map and I want to pan away from the logo automatically to show an infowindow (panning left or right). H ...

javascriptcssgoogle-maps

Mastering the art of manipulating Div elements using CSS for the optimal Print View experience

I have a table with several columns and 1000 rows. When I print the page, it breaks the rows onto different pages, showing the remaining rows on subsequent pages. I want to display the complete record in one go. Below is a sample code with only one row in ...

htmlcsscss-float

Struggling to implement a JavaScript dynamic menu on an HTML website and encountering persistent difficulties

Alright, let's take a look at the HTML code I've put together: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Menus</title> <script type="text/javascript" src="Cities.js"> </scr ...

javascripthtmldynamicmenu

The flexbox container experiences overflow when accommodating flexbox items that contain block content

Issue The presence of block content such as buttons is causing my flex items to expand and overflow the container. Desired Outcome In this particular case, I want the buttons to remain adjacent to each other with the button text truncated using an ellip ...

htmlcssoverflowflexbox

The switch statement is not functioning properly when the button is pressed

I am trying to trigger an alert inside a switch statement when I click a button, but for some reason, it is not working. Even if I simply have an alert in the previous function, there is no output on my website. What could be causing this issue? Here is ...

javascripthtml

Experience a seamless transition as the background gently fades in and out alongside the captivating text carousel

I have a concept that involves three background images transitioning in and out every 5 seconds. Additionally, I am utilizing the native bootstrap carousel feature to slide text in synchronization with the changing background images. Solving the Issue ...

javascripthtmljquerycssbootstrap-4

Arranging divs with Bootstrap version 4

Is it necessary to specify the order for each screen size breakpoint when displaying 2 divs in different orders based on the screen size? <div class="order-xs-2 order-sm-2 order-md-2 order-lg-1 order-xl-1"> <div class="order-xs-1 order-sm-1 order ...

htmlbootstrap-4

Encountering a problem with loading the stylesheet

I keep encountering a 404 error when trying to load the CSS in my web application. The HTML content looks like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSL Inter App</title> <meta nam ...

htmlcss

Will inserting a * in a CSS file affect the styling in Internet Explorer?

I've been tasked with updating an older project to incorporate the latest technologies. Within the project's style sheets, some styles are prefixed with: #calendarDiv{ position:absolute; width:220px; *width:215px; *max-width:210px; border:1px s ...

cssinternet-explorer

Showing an incorrect rendering appearance, the styled <select> element in Bootstrap4 is not

I've incorporated Bootstrap into my website and noticed that the <select> elements look strange without any extra styling. I'm particularly concerned about the appearance of their arrows. Here's how a <select> element styled wit ...

htmlcssbrowserbootstrap-4

How can you conceal all elements except for one div from screen readers?

I recently set up a popup on my website that pops up when a button is clicked. This popup covers most of the screen and prevents users from interacting with anything else on the webpage until they close the popup. While this setup works well for sighted us ...

javascripthtmlaccessibility

What is the best way to implement a table using JavaScript?

I am struggling to add a table to my HTML document dynamically using JavaScript. Despite trying various methods like appendChild and insertBefore, I have not been successful. Below is the snippet of my JavaScript code: //JavaScript code here... Here is ...

javascripthtmlcss

To prevent the page focus from shifting, make sure to force click on a blank link

My question involves an empty link: <a href="#" id="stop-point-btn">+ add stop-point</a> This link is connected to a JavaScript function: $("#stop-point-btn").bind("click", addStopPoint); The JS function simply inserts content into a specif ...

javascriptjqueryhtmlcss

Correcting CSS to ensure alignment of container-fluid container

Having trouble aligning the login box to the center of the page. Any suggestions on how to achieve this? https://i.sstatic.net/3AFoL.png The following code attempts to achieve center alignment using Bootstrap 4.x base_nologin.html <!DOCTYPE html> ...

htmlcssbootstrap-4

Using the jQuery plugin multiple times within one website

I have a decent understanding of jQuery and I'm in the process of developing a plugin. Specifically, it's a dropdown element that I'm working on. Everything functions correctly when there's only one dropdown on the site. However, when ...

javascriptjqueryhtmlcss

How can I show or hide all child elements of a DOM node using JavaScript?

Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...

javascripthtmlcss

Undefined variable 'site' error encountered in Codeigniter views

Query: I encountered an issue while running the program: undefined variable "site" in the views. The code snippet is as follows: <ul class="nav nav-pills"> <li><a href="<?php echo $site ?>/CI_timeline/index"& ...

phphtmlcsscodeigniterundefined

Tips for transferring data from a form to an SQL query

As a newcomer to PHP programming, I find myself in need of guidance for building a school management system from scratch. Despite my efforts to search online resources, I am still confused. My goal is to retrieve all the 'offered courses' from th ...

phphtmlmysql

Meta refresh fails to update the page

Do you have to place the meta refresh line above the closing </head> tag? In my situation, I am unable to do so because I need to parse certain variables to determine the number of seconds for the page to automatically refresh. This process occurs in ...

phphtmlpage-refresh