Tips for aligning an input field alongside a button using CSS and HTML

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: blueviolet;
}

.welcome_text {
  width: 500px;
}

.welcome_form input,
.welcome_form button {
  display: block;
  width: 100%;
}

.welcome_form input {
  margin-bottom: 15px;
  padding: 100px;
}
<div class="wrapper">
  <div class="welcome_text">
    <form class="welcome_form">
      <input type="text">
      <button type="submit">Start Quiz</button>
    </form>
  </div>
</div>

It is evident from the code that the welcome_text section is set to a width of 500px. However, upon rendering, there seems to be alignment issues as shown in the screenshot. The problem exacerbates when using padding on the input box. https://i.sstatic.net/JQVF6.png

What would be the best approach to resolve this alignment issue?

htmlcss

Answer №1

At this moment, any padding applied to the input element also impacts its 100% width, which is set to 500px. Consequently, the total width includes 500px of input width, 100px of padding on the left side, 100px of padding on the right side, and a 2px border around the input. To resolve this issue, refer to the code snippet below :

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: blueviolet;
}

.welcome_text {
  width: 500px;
}

.welcome_form input,
.welcome_form button {
  display: block;
  width: 100%;
}

.welcome_form input {
  margin-bottom: 15px;
  padding: 100px;
  width: calc(100% - 200px);
  border:0;
}
<div class="wrapper">
  <div class="welcome_text">
    <form class="welcome_form">
      <input type="text">
      <button type="submit">Start Quiz</button>
    </form>
  </div>
</div>

Answer №2

To achieve a centered input and button layout, apply the display: flex; property to the .welcome_form class. Combine this with other CSS properties for optimal alignment.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: blueviolet;
}

.form_text {
  width: 500px;
}

.form_layout{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}

.form_layout input,
.form_layout button {
  display: block;
  width: 100%;
}

.form_layout input {
  margin-bottom: 15px;
  padding: 100px;
}
<div class="container">
  <div class="form_text">
    <form class="form_layout">
      <input type="text">
      <button type="submit">Submit Form</button>
    </form>
  </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

The CSS for selecting the input[type="submit"] element is not functioning as expected

I apologize but I am encountering an issue with my .css stylesheet that covers styles for my input type buttons as shown below. input[type="submit"] input[type="submit"]:hover input[type="submit"]:focus The first three selectors are functioning well, how ...

cssbuttonsubmitonselect

The built-in browser form validation is failing to function properly within a Vuetify v-form component

I want to utilize the default form validation of browsers for basic validations like required and email, while handling more complex validations in my service layer. However, I am having trouble implementing the required and email properties in my form. ...

htmlvue.jsvuetify.js

Having trouble with Github pages' responsiveness on certain devices

The responsive view in the browser appears to be working correctly. Everything is functioning fine. However, when I switch to my Android phone, the alignment is off. I've tested it on multiple devices and the results are consistent. What could be cau ...

htmlcssresponsive-designresponsiveresponsive-images

Using jQuery to make an element follow you as you scroll down a page inside a div

I've made some progress on my code: HTML <div id="header"></div> <div id="content"> <div class="sidebar-wrapper"></div> </div> <div class="session-wrapper"></div> <div id="footer"></div> ...

jqueryhtmlcss

What is the process for incorporating multiple HTML pages into an Ionic hybrid mobile application?

Struggling to combine my sign in and sign up pages into a single index.html page. I'm currently working on a project involving Hybrid mobile app development. ...

javascripthtmlangularjsionic-framework

Is it possible to display a div when hovering over it and have it remain visible until

How can I make the div ".socialIconsShow" fade in when hovering over ".socialIcons", and then fade out when hovering over ".socialIconsShow"? Is there a way to keep the icons visible even after leaving ".socialIcons"? <div class="socialNetworks"> ...

jquerycsscss-sprites

Tips for horizontally aligning a list with sublist using CSS

Is there a way to align a horizontal list with a sublist in HTML and CSS? I want the menu items (Home, News, etc.) to be on one line, with submenu items below them. HTML <body> <div class="menu"> <ul class="menu_l ...

htmlcss

Adjust the border color of a TextField in react/material ui based on whether props are required

If a value is required, the TextField border color will be red. Once a value is entered, the red border will disappear. Check out the images by clicking on the links below: Entered Value Without Value with Required field ...

cssreactjsmaterial-ui

Display the element once the class enters the viewport

I am attempting to display a div only when certain elements with a specific class are visible in the viewport. I made progress with this example: http://jsfiddle.net/blowsie/M2RzU/ $(document).ready(function(){ $('.myclass').bind('inv ...

javascriptjqueryhtmlcssviewport

Steps for loading a new page by clicking an input button:

I'm looking for some help with a basic issue I'm having while customizing a WordPress plugin. I want to redirect the user to the thankyou.php page when they click on the place_order button. I tried changing the input value to thankyou.php, but it ...

phphtmlwordpress

How can I make this div appear on the screen?

I have recently encountered an issue with a navbar on my webpage. Despite adding all the necessary links, one of them mysteriously disappears from view. It seems to be present when inspected in the console, but it just won't display on the front end. ...

cssreactjs

CSS Grid generates a unique container for every HTML element

My website's CSS code includes the following: *{ height: 100%; width: 100%; margin: 0; } .grid{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .grid div:nth-child(odd){ border: black 2px so ...

htmlcssvue.jscss-grid

PHP - contact form is live for just 2 hours daily

Hello, this is my first time here and I could really use some assistance. Please bear with me as English is not my strong suit compared to most people here, but I'll do my best to explain my query. So, I have a PHP script for a contact form on my web ...

javascriptphphtml

Fade out with CSS after fading in

After setting an animation property on an HTML element to display it, I want the same animation in reverse when a button is clicked to hide it. How can I achieve this effect? "Working Animation": .modal { animation: myAnim 1s ease 0s 1 normal fo ...

htmlcss

Creating a SASS rule for targeting an element only if its parent does not have a specific classname can be achieved by using the '&' symbol in

Before anything else, I want to express my apologies if a similar query has been raised previously. Unfortunately, finding such specific cases can be quite challenging. My objective is to style every "a" element, excluding those enclosed within h1, h2, h3 ...

htmlcsssassparent

What is the best way to incorporate polling into the code provided below? I specifically need to retrieve data from the given URL every 60 seconds. How should I go about achieving this

Can you assist me in integrating polling into the code below? <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"> ...

javascripthtmlajaxhighcharts

Adjusting the spacing between rows in Bootstrap 5

Having trouble with the spacing in my latest markup update. Here's what I have: <div class="row"> <div class="col-md-12"> <div class="form-group"> <label class="control-la ...

htmlcsstwitter-bootstrapbootstrap-5

Issues are arising with Bootstrap's functionality within the Vite React app

I am new to working with react and vite. I am currently developing a vite react application that requires the use of bootstrap. I followed the instructions provided on the official Bootstrap website here. However, not all Bootstrap functionalities are work ...

javascriptcssreactjsbootstrap-5vite

Is there a method to ensure equal alignment of the <div class="card"> elements in Bootstrap?

I need help figuring out how to align this card uniformly with the others: https://i.sstatic.net/x2wZ2.png In the image below, you can see that the card for the top reason for downtime doesn't match the other cards. I want them all to be the same he ...

cssbootstrap-4frontend

I attempted to layer multiple images on top of each other, but unfortunately, the background has disappeared

I am attempting to align a series of images together, but I seem to have lost the background in the process. I am using "position:absolute" and while the images stack nicely due to their correct sizes, there seems to be an issue with the backgrounds. My go ...

htmlcss