Position the text in the exact center of an HTML element using absolute positioning

Hey there! I am currently working on a website and I'm trying to create a simple delete button that can be used throughout the site. However, I'm having trouble getting it positioned correctly...

Here's what I have so far:

<button id="clear-input-location" name="clear-input-location">×</button>


#clear-input-location {
    display:block;
    background: #CCC;
    color: #FFF;
    border: none;
    font-weight: bold;
    font-size: 20px;
    border-radius: 20px;
    line-height: 0;
    height: 26px;
}

You can view the fiddle here: http://jsfiddle.net/kpheR/

htmlcss

Answer №1

Give this a shot

<div class="b">
  <button id="clear-input-location" name="clear-input-location">×</button>
</div>

.b{
  text-align:center;
 }

See it in action

Answer №2

To make your text appear horizontally centered, apply the margin: 0 auto; style.

Answer №3

After some experimenting, I successfully resolved the issue by enclosing the symbol "x" within a span element and adjusting its styling to position it correctly. Thank you for your help nonetheless.

For those who may encounter a similar situation:

http://fiddle.jshell.net/kpheR/3/

Answer №4

Experiment with

.middle-align {

text-align: center;
vertical-align: middle;

}

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

Do not display large numbers within an HTML card

I have this card here and displaying dynamic data inside it. The number is quite large, so I would like it to appear as 0.600000+. If a user hovers over the number, a tooltip should display the full number. How can I achieve this? Below is the HTML code ...

htmlangulartypescript

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

My current task involves inserting radio button values into a MySql database using Angular. The form consists of radio buttons with predefined values stored in a json file. Below is an example of how the json file is structured: //data.json [{ "surve ...

javascripthtmljsonangulartypescript

Having difficulty transforming both scale and box-shadow at the same time

Is there a way to animate the circle's box-shadow while also scaling it down from 1.6x to 1 during the same transition period? I'm having trouble with the timing of the scale animation, as it seems to occur after the box-shadow animation is fini ...

htmlcsscss-animationscss-transformsbox-shadow

Emojis representing flags displayed on screen

Is there an option to display a flag icon? For example, I am able to write Hello ...

htmlcss

What is the best method for extracting [object Text] using XPath?

I'm currently working with Selenium and attempting to extract text from a node that contains the keyword "approved," but I'm unsure of how to retrieve and validate this specific text. Here is the node structure - <div class="Notification-bo ...

htmlselenium-webdriverxpath

Rule for restoring scroll position upon reloading web pages in browsers

When it comes to websites that handle data asynchronously, the behavior of scroll position restoration upon browser refresh can vary. Sometimes the scroll position is preserved, while other times it is not. For example, when reloading after scrolling down ...

javascripthtml

Optimizing image centering in Next JS as screen size expands

I've been struggling to work with NextJS's Image component. My goal is to set up a banner image that only covers a specific amount of space on the screen, regardless of screen size. I have managed to achieve this by using max-height: 30vh and ov ...

javascripthtmlcssnext.jsnextjs-image

Optimizing CSS across various pages and screens sizes with critical importance

My CSS file is in need of optimization for quicker loading times. It contains numerous components utilized across various pages (such as the start page, category pages, and detail pages) on different screen sizes (mobile, tablet, desktop). Manual optimizat ...

cssperformanceweb

Displaying images dynamically in a gridview from a hard drive source

I am facing an issue trying to dynamically retrieve an image from my hard drive. Despite creating the dynamic path correctly, the image is not displaying. The root cause of this problem lies in the fact that I am developing a back-end system for a website ...

c#cssasp.netgridview

Using the class for jQuery validation as opposed to the name attribute

I am looking to implement form validation using the jquery validate plugin, but I am facing an issue with using the 'name' attribute in the html since it is also used by the server application. Specifically, I want to restrict the number of check ...

javascriptjqueryhtmlcssjquery-validate

Having trouble getting rid of the border-bottom?

I have been attempting to customize the appearance of the React Material UI tabs in order to achieve a design similar to this: https://i.stack.imgur.com/tBS1K.png My efforts involved setting box-shadow for the selected tab and removing the bottom border. ...

javascripthtmlcssreactjsmaterial-ui

Issues with data within a Vue.js pagination component for Bootstrap tables

Currently, my table is failing to display the data retrieved from a rest api (itunes), and it also lacks pagination support. When checking the console, I'm encountering the following error: <table result="[object Object],[object Object],[object Ob ...

javascripthtmlcssvuejs2bootstrap-vue

Obtaining a variable from HTML and passing it to Node.js

Currently, I am utilizing express to handle form submissions. Within my HTML file, there are 20 inputs with unique ids such as address1, address2, address3, and so on. In my node js code, I access these input values using req.body.address1. Users have th ...

javascripthtmlnode.jsexpress

Issue with positioning Bootstrap tooltip on the right side causing it to not display correctly

Currently, the tooltip I have is functioning properly: However, my main requirement is to align it to the right. So, when I use .pull-right, it appears like this: This is the HTML code snippet: <div class="wrapper">Login <span rel= ...

jqueryhtmlcsstwitter-bootstrap

Tips for placing a button on top of a Div element with overflow set to hidden?

My goal is to have a button placed over a box, but I am facing difficulty achieving this. I have experimented with z-index, grid-content, and other methods, but the button refuses to show over the box as desired. The placement of the button inside the box ...

htmlcss

The slideshow fails to show correctly after being loaded from an external JavaScript file

Utilizing standard code, I have set up a Slideshow at the top of a website: HTML: <body id="Top" onload="showSlides()"> ... <div id="slides"> <div id="slide1" class="slides fade"></div> <div id="s ...

javascriptcss

There is excessive space beneath the text

I am struggling with aligning text vertically to match the chevrons. I have attempted various CSS properties like removing paddings/margins, setting line-height to 1, using text-decoration: none, text-align: center, and vertical-align: middle on my <p&g ...

css

Animate the chosen text via specialized effects

I am trying to implement a show/hide feature for specific text using jQuery. The challenge I am facing is having multiple instances of the same text tag with identical ids. I want to trigger the animation on a particular child element when hovering over it ...

jqueryhtml

Unable to cycle through an array of objects in JavaScript. Only receiving output for the initial element

var people = new Array(); var individual = { first_name: "Padma", identification_number: 1, region: "India" }; people.push(individual); people.push([individual = { first_name: "Balaji", identification_number: 3, region: "India" }]); people. ...

javascripthtmljquery

Problem with logo in MVC4 apps

I'm working on incorporating a logo into my MVC 4 website. When the logo is clicked, it should navigate to the home screen. In order to achieve this, I've added the following code snippet in the _Layout.cshtml file. <a href='<%= Url.A ...

htmlasp.net-mvcasp.net-mvc-4