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

Retrieve information from individual XML nodes in a parsed string

When making an Ajax call to retrieve XML data from a different domain using a PHP proxy to bypass cross-origin restrictions, I am unable to extract the values from the XML nodes and display them in my HTML tags. Despite no errors showing up in the browser ...

javascriptphphtmlajaxxml

Changing colors when hovering over different elements

I am struggling to create a hover color change effect that applies to all elements (icon, text, and button) from top to bottom. Currently, the hover effect only changes the color of either the text and icon or the button individually. Below is the code sn ...

htmlcsshover

Is there a way to include text beneath the navigation bar and other elements on the page?

I am stuck trying to add some text below my header and navigation bar. Here is the code I've been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

htmlcsstextheadernav

Navigating Divs Using jQuery

I am working with a class that has multiple divs, each with a unique id attached to it. I am using jQuery to dynamically cycle through these divs. This is a snippet of my HTML code: <div id ="result">RESULT GOES HERE</div> ...

javascriptjqueryhtmlcss

Troubles with Placing Image on WordPress

Working on a Wordpress component for a website where I placed a "SOLD OUT" image over text. However, the issue arises when viewing the site on mobile devices, as the images are smaller and not in their correct positions due to using absolute positioning. ...

htmlcsswordpress

What is the best way to retrieve the value of a JavaScript variable and display it within an HTML label tag

In my JavaScript code, I'm attempting to retrieve location coordinates using the onchange event and then display those coordinates in a label. I've tried alerting the coordinates successfully, but I'm struggling to update the label using doc ...

javascripthtml

Is there a way to create an image gallery layout similar to Pinterest using CSS?

I am currently developing a dynamic PHP gallery that will feature thumbnails with the same width but varying heights. These thumbnails will be arranged from left to right, so I would prefer not to use a traditional five-column layout. I suspect that achiev ...

javascriptjquerycssgallery

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

javascripthtmlcss

Utilizing Angular's directive-based *ngIf syntax instead of passing a string parameter

Currently, I'm studying the article on reactive forms by PluralSight to brush up on my knowledge and I'm having trouble understanding the syntax provided below. <div *ngIf courseForm.get('courseName').valid && courseForm.get ...

htmlangularformsdirectiveangular-ng-if

Mastering the utilization of React props within a Tailwind component

Looking to implement a straightforward button component in a Next App using Tailwind CSS, where I can pass values such as background color, text color, etc. through props and use them to render different types of buttons within my application. Take a look ...

cssreactjsnext.jstailwind-csstailwind-in-js

Experienced an unexpected setback with the absence of the right-click capability on a Javascript-powered hyperlink, specialized for

I am facing an issue with a hyperlink on my website. This particular hyperlink submits a hidden form using the POST method to redirect users to another site. However, when someone right-clicks on this hyperlink and tries to open it in a new tab, they are o ...

javascripthtmlhyperlink

Application of id missing on all buttons in Bootstrap tour template

I'm having an issue with applying a new id to the next button in a Bootstrap tour template. I added the id to the button, but it only seems to work for the first stage and not the subsequent ones. Can anyone provide insight into why this might be happ ...

javascripthtmlcsstwitter-bootstrapbootstrap-tour

When attempting to implement sound on hover with an <a attribute containing an image>, the functionality is not functioning as expected

Is there a way to make a sound play only once when hovering over a list item that contains an image? Here is the HTML and JavaScript code I am using: function playclip() { var audio = document.getElementsByTagName("audio")[0]; audio.play(); } <ul ...

javascriptjqueryasp.nethtmlcss

When a button is clicked in (Angular), it will trigger the highlighting of another button as a result of a value being modified in an array. Want to know the

Currently in the process of developing a website with Angular, I've encountered an unusual bug. The issue arises when using an *ngFor div to generate twelve buttons. <div *ngFor = "let color of colors; let i = index" style = "display ...

htmlangulartypescriptbuttonclick

Update the JavaScript to modify the styling based on the specific value of the

Is there a way to apply specific style properties to images only if they already have another property? I've managed to achieve this with the following code snippet: if ($('#content p img').css('float') == 'right') $ ...

javascriptjquerycsshtml

Turn off HTML display for Internet Explorer users

I am looking to implement code that will block certain pages for Internet Explorer users, making it accessible only for Google Chrome and Firefox users. Do you have any suggestions on how I can achieve this or if there are existing solutions available? I& ...

javascriptphphtmlbrowserweb

How can you determine if a DIV element is within view in HTML (without being overflowed)?

Is there a way to determine if a DIV is within its container and therefore visible? In this scenario, the active button (highlighted) can be seen because it is contained within the boundaries: However, in this case: The active button cannot be viewed as ...

htmlcss

HTML elements generated dynamically do not possess any jQuery properties

I have implemented a draggable list of Div elements using jQuery. Here is the code: <div id="external-events"> <h4>List Of Staffs</h4> <div class="external-event" data-id="1">Name</div> //Draggab ...

javascriptjqueryhtml

Activate the saturation toggle when a key is pressed in JavaScript

I am trying to modify a script that currently toggles the value of a variable when a key is pressed and then lifted. Instead of changing the variable value, I would like to adjust the saturation of the screen based on key presses and releases. How can I ac ...

javascripthtmljquerycssfrontend

Repair the navigation bar once it reaches the top of the screen using ReactJS

I have a webpage that contains specific content followed by a bar with tabs. My goal is to have this bar stay fixed at the top of the screen once it reaches that position while scrolling down, and only allow the content below the fixed bar to continue scro ...

javascripthtmlcssreactjstailwind-css