What is the best way to incorporate an element's width into a calculated value in CSS?

Currently, I am utilizing the Bootstrap 3 framework.

In order to center a button that is 300px wide horizontally on the screen, I have implemented the following CSS code which incorporates the use of calc:

.kiosk-form .centered
{
  margin-left: calc(50% - 150px);
}

Although in the provided code snippet, I am keen on substituting 150px with something like "element.width/2", aiming to eliminate the fixed half-width in pixels, I am currently facing challenges doing so.

If anyone could suggest a solution, it would be greatly appreciated.

Additionally, I'm curious whether there is an alternative method to achieve horizontal centering for a button?

htmlcsstwitter-bootstrap-3calc

Answer №1

Would you mind giving this a shot?

.kiosk-form .centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

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 issue with collapsible elements not functioning properly in an Angular application involving CSS and JS

My implementation of collapsible in a plain HTML page looks like this: <!DOCTYPE html> <html> <head> <title></title> <style> button.accordion { background-color: #777; color: white; cursor: pointer; p ...

javascripthtmlcssangular

Issue with displaying multiple checkboxes using Materialize CSS in combination with Leaflet for web-mapping overlays

I'm currently using Materialize 0.97.7 along with Leaflet 1.0.1 (the latest version). <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com ...

javascriptcssleafletmaterialize

Troubleshooting a unique CSS problem on an Android PhoneGap

We are currently working on an Android application using PhoneGap, HTML, CSS, and jQuery Mobile. After compiling the application in Eclipse, everything seems to work correctly. However, I am facing an issue where my CSS styles are not updating when recompi ...

androidjqueryhtmlcsscordova

What is causing the CORS error with JQUERY and JQM?

My HTML5 page is set up without any jQuery and has no CORS error, as shown below: <!DOCTYPE html> <HTML> <button type="button" onClick="getBase64FromImageUrl()">Click Me!</button> <img id="preview1" crossorigin="anonymous" src=" ...

jqueryhtmlgoogle-chromejquery-mobilecors

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the c ...

javascripthtmlcsssass

The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing

After successfully creating a password redirect page where entering the correct password redirects you to another URL (psswrdtest.tumblr.com with the password as correctpsswrd, redirecting to google.com*), I attempted to improve it by making the password p ...

javascriptjqueryhtmlcsspasswords

How can I display a list of relative urls in an android TextView?

I have a situation in my application where I am displaying a block of HTML content in a TextView, which has been extracted and parsed from a webpage. This HTML includes numerous links, with some being absolute and others relative. My goal is to allow the u ...

androidhtmltextview

Utilize a dynamic URL within the HTML audio element

Currently, I am working with the use of the audio tag in HTML and AngularJS. I need to specify the source of the audio file I want to play, as shown below. <audio src="http://localhost/audio/221122/play/212223.mp3" audio player controls p ...

javascripthtmlangularjsaudio

How can I use Angular to toggle a submenu based on a data-target attribute when clicked?

Struggling to implement a functionality using ng-click to retrieve the data-target attribute of a clicked angular material md-button, in order to display the submenu when a topic is clicked on the sidenav. The navigation structure consists of md-list with ...

javascriptjqueryhtmlangularjs

What could possibly be the issue here? The error message I received is: "Error: INSERT INTO.... Unknown column 'jon' in 'field list'"

When attempting to input form data into my database, I encountered two distinct errors. Initially, an error related to SQL syntax appeared: "Error: INSERT INTO movie (firstname, surname, phonenumber, email, movie, session, day) values(jon, doe, <a href ...

phphtmlmysqldatabasephpmyadmin

`The search bar and search button`

On mobile, I have a search field and a button working fine. However, when typing in something and hitting "search" on the phone's keyboard, it leads to a 404 error. But clicking the "search" button works as expected. I would like to be able to hit "se ...

phphtmlcss

Encountered a SyntaxError stating 'Unable to use import statement outside a module' while attempting to utilize three.js

I'm facing difficulties with incorporating three.js into my project. Initially, I executed: I am referring to the guidelines provided here: In my VS Code terminal for the project folder, I ran the following command: npm install --save three Subsequ ...

javascripthtmlthree.js

In AngularJs, I am unable to prevent my ui-sref anchor tag from being triggered using event.preventDefault()

Here is the code snippet I am working with: <a ui-sref="MyModule">My Module</a> When the link is clicked, the following function will be triggered: $scope.$on("$locationChangeStart", function (event) { if (!confirm('You have un ...

htmlangularjspreventdefaultui-sref

Exploring the process of customizing native classes with Vue.js

Within vue-awesome-swiper, there's a standard class called this: .swiper-button-next { position: absolute; right: 46% } The task at hand is to adjust this CSS code only for right-to-left layouts, like so: .swiper-button-next { position: abso ...

cssvue.js

Creating a custom script for a search field that retrieves information from an XML document

Attempting to create a script that iterates through an XML file, the provided code currently displays alerts but fails to show information when a valid value is entered into the search field. However, upon removing the error checks and keeping the final ...

javascripthtml

Interacting with click events on SVG elements without a bounding box

Within my SVG (target) element, there are multiple SVG (descendent) elements. This SVG container is nested deep within the SVG (root) on the webpage. The issue I am encountering is that when I register an event on the SVG (target), it only triggers if yo ...

htmlsvg

IE7, IE6 display margins differently compared to other browsers

Can anyone help with an issue I'm having with a CSS ul list menu? #header-container #header ul.top-nav { float: left; margin: 20px 0 20px 10px; } #header-container #header ul.top-nav li { float: left; margin-right: 8px; border-rig ...

css

What is the best way to dynamically insert an image into an <li> element?

I am looking to enhance my menu by adding an image below each li item as a separator. How can I achieve this using CSS? I want the images to automatically appear whenever a new li tag is added to the ul. Here is the HTML code: <ul class="menu"> ...

htmlcsshtml-listsbackground-image

Choose an option from the dropdown list using ellipses

I am looking to truncate the dropdown list options with ellipsis, and when clicked on the ellipsis, users should be able to view the full option values. For instance, the dropdown list currently looks like this: <select id ="id"> <option ...

javascriptjqueryhtmlcss

Why does this particular user continue to encounter validation errors in ASP.NET?

While most of us successfully submitted the request form for server decommission, one particular individual encountered an issue. They were unable to submit the form due to a pop-up alert stating "Invalid User Data, return to form." Despite verifying their ...

javascripthtmlasp.net