Button failing to align properly in the center position

I was able to successfully create a responsive input box, but for some reason, the button is not aligned in the center.

Below is the CSS code:

.webdesigntuts-workshop button {
  background: linear-gradient(#333, #222);
  border: 1px solid #444;
  border-radius: 5px 5px 5px 5px;
  -webkit-box-shadow: 0 2px 0 #000;
  box-shadow: 0 2px 0 #000;
  color: #fff;
  font-family: "Cabin", helvetica, arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  height: 40px;
  margin: 20px;
  padding: 0 10px;
  padding-bottom: 2px;
  text-shadow: 0 -1px 0 #000;
  display: inline-block;
  width: 100%;
  max-width: 120px;
  float: center;
}

Here is the full Codepen link:

https://codepen.io/anon/pen/XZrqzZ

htmlcss

Answer №1

Your code seems to be a bit messy and overcrowded. However, the issue does not lie with the button, but rather with the input element. The margins on the input are causing it to extend beyond the screen because you have set its width to 100%. This means that the input is taking up 100% of the screen plus the margin, which is why it is not displaying as intended.

To fix this in your CSS, try the following:

.webdesigntuts-workshop input{
  margin: 0;   /* Set margin to 0 */
  width: 100%;
}

.webdesigntuts-workshop button {
  margin: 0 auto;   /* Add this line for centering */
}

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

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

javascripthtmlcssslideshow

Safari has a unique feature where margins are not factored into the scroll width calculation

I am facing an issue with a container that scrolls horizontally. Inside this container, there are multiple items and I have added a margin to the last item on the right. However, in all browsers except for Safari, the margin is included in the scroll width ...

csssafari

PHP Tutorial: Updating the PDF Page Title in Web Browser

I have a situation where I am able to display a PDF file in the browser using some codes. However, I am having trouble figuring out how to change the page title and the title bar. Is it possible to customize the title? $file = "additionalInfo_content/QXp6 ...

phphtmlpdf

"Concealing specific choices in Autocomplete with reactjs: A step-by-step guide

I am looking for a way to hide the selected option in a Dropdown menu so that it does not appear in the next dropdown. For example, if "Hockey" is selected in the first dropdown, it should not be displayed in the second dropdown; only "Baseball and badmint ...

cssreactjsmaterial-ui

Creating an Angular form from scratch using HTML

I've developed a component named login. Initially, I created an HTML form called login.component.html and then decided to convert it into an Angular form. To achieve this, I inserted <form #loginform="ngForm"> in the login.component.ht ...

htmlangulartypescript

Navigating into the forbidden territory of the if block that holds secrets untold

Encountering an issue with the angularjs $location feature. I have set up an auth interpreter that redirects to the login page if a 401 error (unauthorised) is returned by the server. In my app.js file, both the auth interpreter and the account data loadin ...

htmlangularjs

HTML/ModX styling for selected textboxes

I am looking to enhance the style of my search-box, which is similar to the one on THIS website. While I have tried using :active, the effect only lasts for a brief moment. Currently, my code is heavily influenced by modX terms, but I will still share it h ...

htmlcssmodx

Fade-in animation of a clock on an SVG image

I am trying to achieve a unique fade-in effect for an SVG image in my HTML. The challenge is to make the fade-in start from the top of the image and progress in a circular motion until it completes a full circle. An example of the effect I am aiming for is ...

javascriptjqueryhtmlcsssvg

Retrieve the DOM variable before it undergoes changes upon clicking the redirect button

I have been struggling for a long time to figure out how to maintain variables between page refreshes and different pages within a single browser session opened using Selenium in Python. Unfortunately, I have tried storing variables in localStorage, sessio ...

javascriptpythonhtmlselenium

The div inside an iframe is not displaying the desired background color as intended from the parent page

The code snippet below is included in the <head> section of the main page: <script type="text/javascript"> $(document).ready(function () { $('#innerframe').load(function () { $(this).contents().find($(".TitleB ...

javascriptjqueryhtmlcssiframe

Z-index behaving abnormally

I've been working on developing a website and one of the key features I'm trying to implement is a slideout menu that slides horizontally when the mouse hovers over it. To make development easier, I initially set the menu to be fully extended by ...

htmlcss

Increasing the size of iframe in a Flexbox layout

I'm facing a challenge in making the iframe element stretch to occupy the remaining space within my web application. While I have ensured that the maximum space is allocated for the div by setting a border, the iframe's height does not automatica ...

htmlcssiframeflexbox

The function button.click() is not compatible with Internet Explorer 11 and will not

I have implemented a jqx menu using the code snippet below: <ul style='width: 200px;'> <li onclick="logOffButton.click();">Sign off</li> </ul> My goal is to automatically trigger a click event on the "logOffButton" o ...

javascriptjqueryhtmlinternet-explorer

Turn off the scrolling bars and only allow scrolling using the mouse wheel or touch scrolling

Is there a way to only enable scrolling through a webpage using the mouse wheel or touch scrolling on mobile devices, while disabling browser scroll bars? This would allow users to navigate up and down through div elements. Here is the concept: HTML: &l ...

javascriptjqueryhtml

Hide an Angular button when a page is loaded, depending on the information found in a table

How can I hide the Submit button in a table row if a certain condition is met based on information from the database? I attempted to create a function that returns true or false, but it ends up crashing my program because it runs continuously. I also trie ...

javascripthtmlangularjs

The XPath for pagination is incorrect

Whenever I try to navigate to the next page, I keep encountering an error from the robot. Can someone help me construct the xpath using either of these snippets: <li title="2" class="ant-pagination-item ant-pagination-item-2" tabind ...

cssseleniumxpathrobotframework

Attempting to interpret HTML in Javascript

I have a text string that contains HTML tags. Initially, I attempted to insert this using innerHTML, but the tags were displayed as plain text. After some troubleshooting, I realized that I needed to properly parse the HTML content. Although jQuery prov ...

javascriptjqueryhtml

Align two columns using the vertical alignment feature in the Bootstrap grid system

Is there a way to horizontally align an element within a bootstrap grid? In the code snippet below, I have a col-md-4 and another col-md-8 that I would like to vertically align in the middle, as shown in the image. Click here for a demonstration. This is ...

htmlcsstwitter-bootstrapgridview

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

javascriptcss

Display React elements on the web page

Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario: My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this imag ...

javascriptcssreactjstypescriptreact-router