Looking to have the text centered both vertically and horizontally within an <a> tag

I have a created an <a> element that links to JavaScript, but I want it to look like a button.

<a href="javascript:void(0)" id="closebtn" onclick="closeNav()">&times;</a>

Here is the CSS code:

#closebtn {
    border-radius: 100%;
    position: absolute;
    font-size: 50px;
    text-align: center;
    width: 48px;
    height: 48px;
    top: 100px;
    right: 45px;
    padding: 5px;
}

#closebtn:hover {
    background-color: #5c564f;
    color: #FFF6EA;
    padding: 3px;
    border: 2px solid #FFF6EA;
}

I have centered it horizontally using text-align, but the X symbol is not perfectly aligned in the middle of the circular "button." Is there a way to achieve this?

I attempted using justify-element, but since I am working with <a> and not <button> or <div>, I am finding it challenging. There must be a simple solution that I am missing.

javascripthtmlcss

Answer №1

To center the X, you can set its display to flex, and then adjust the align-items and justify-content properties to center.

Keep in mind that font size can impact the alignment, so the X may not be perfectly centered without adjusting the font size.

#closebtn {
    display: flex;
    border-radius: 100%;
    position: absolute;
    font-size: 50px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    top: 100px;
    right: 45px;
    padding: 5px;
    text-decoration: none;
}

#closebtn:hover {
    background-color: #5c564f;
    color: #FFF6EA;
    padding: 3px;
    border: 2px solid #FFF6EA;
}
<a href="javascript:void(0)" id="closebtn" onclick="closeNav()">&times;</a>

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

Having trouble linking multiple components using redux in react native

I'm having trouble figuring out how to connect two different components using the redux store. Here's what I've attempted: View.js import React from 'react'; import {View, Text, Button} from 'react-native'; import {Act ...

javascriptreact-nativereduxreact-reduxjsx

Is there a way to automatically render Katex without the need for double dollar signs?

I've been facing difficulties grasping the concept of rendering Katex without relying on $$ before and after the math expression. According to Katex's repository on GitHub, I should use the following code: <script> renderMathInElement( ...

javascriptmathjaxtexkatex

Downloading an empty excel file in PHP using iframes

I am trying to create a frame with a header that includes buttons for listing, PDF, and Excel options. The data from the database is displayed under the header, and everything works fine with the listing option. However, when I attempt to download an Excel ...

javascriptphpexcel

Unable to execute standard JavaScript code in node.js using express.js

Currently, I'm in the process of learning express.js and I've come across this simple express code snippet: const express = require("express"); const bodyParser = require("body-parser"); const app = express(); const port = 3000; app.use(bodyPar ...

javascriptexpress

Tweenmax opacity will hold at 1 for a short period of time after the page has been reloaded

After implementing TweenMax from Gsap, I created a landing page intro with a loading container containing three divs, each with a h5 element positioned in the center using absolute positioning. Initially, I used StaggerFrom {opacity 0} to staggerTo {opacit ...

javascripthtmlcssgsap

Change the color of a specific day on the Arshaw Calendar using CSS

Can anyone help me with changing the color of the box in the month view in the arshaw calendar? I've been attempting to do so using this script, but my lack of expertise in javascript is proving to be a hurdle. The goal is for this script to be called ...

javascriptjquerycsscalendarfullcalendar

The markers within a loop in react-native-maps are failing to render

Recently, I've been delving into the world of React Native app development for iOS. Specifically, I've been experimenting with the react-native-maps package. Here's the issue I'm facing: When I statically render a single MapView.Marker, ...

javascriptiosreactjsreact-nativemaps

Utilize JavaScript to reference any numerical value

I am attempting to create a button that refreshes the page, but only functions on the root / page and any page starting with /page/* (where * can be any number). Below is the code I have written: $('.refresh a').click(function() { var pathNa ...

javascriptjquery

Double Triggering JQuery Event

I have a question regarding changing a property or attribute value and the execution of a change listener. Despite what I've read, in my case, it seems to trigger the listener. $(document).on('keyup change', '.fire', function( ...

javascriptjqueryhtml

How can I make a Material UI element fill the entire remaining width of the Grid?

Is there a way to make the child element take up the remaining width of the grid in Material UI? I am trying to have the "User Name" text field fill up the rest of the space in the grid cell but so far I have not been successful. I have even attempted us ...

cssreactjsmaterial-uigrid

Is it possible to extract data from a table by adjusting Javascript in the inspector tool? The page is only showing today's data, but I'm interested in retrieving historical data by going back

My Desired Action: I am interested in extracting data from the 2nd and 3rd tables on this page. However, the data displayed is specific to the current 'day'. I wish to access readings from September 1st and import them into a Google Sheet. Speci ...

javascripthtmlweb-scraping

Using CSS margins for elements lacking specific widths

Is there a way to centrally align a div element that doesn't have a set width? <html> <head> <title></title> <style type="text/css"> .outer { padding: 10px; /*margin: auto; (doesn´t work)*/ ...

htmlcsscentering

Conceal altered dropdown menus

I am working on a table that contains 3 rows, each with 3 select boxes. My goal is to hide the select box when a change occurs, insert a brief loader image for 250 milliseconds, and then display the select box with the selected option. For example, if I ch ...

jqueryhtml

Inadequate text alignment

Trying to create a header mockup for a website featuring branding elements like a logo and brand name. Utilizing Angular.js for the webpage development process, incorporating a URL for the logo image from an online source. Encountering alignment issues th ...

htmlcssangularjstext-alignment

Error in MEAN CRUD operation cannot be determined

{ text: undefined, done: false, _id: 529e16025f5222dc36000002, __v: 0 } PUT /api/todos/529e16025f5222dc36000002 200 142ms - 68b Encountering an issue while updating my CRUD todo list. Despite receiving a successful status code of 200 after submittin ...

javascriptnode.jsmongodbangularjscrud

The HTML email appears distorted on Yahoo and Outlook, but displays correctly on all other platforms

Basically, I have an HTML email that was converted from a PSD file. I sliced the layers, made some changes to the URLs, and did a test email. The email looks fine on most email clients, but when I send it to Yahoo Mail or Hotmail/Outlook and open it in Chr ...

htmlcssemail

Sticky CSS - A guide to making aside elements fill the entire available height

How can I create a grid layout where the aside is sticky to top: 0 and fills all remaining height (e.g. 100% of height), but when scrolling down, the aside height should be changed to 100% minus the footer's height? Is it possible to achieve this with ...

csscss-positionsticky

At random intervals, a ReferenceError is triggered stating that Vue is not defined

While working on an application that uses templates rendered by Apache Velocity, I encountered the error "Uncaught ReferenceError: Vue is not defined" when trying to incorporate vue.js components. Oddly enough, this error is not consistent - it occurs most ...

javascriptvue.jsvelocityapache-velocity

Populate the content of the child DIV to match the grid layout as a whole

I am attempting to control the layout of the grid on my website using CSS. By utilizing Bootstrap 4, I have created two divs with equal height using display:grid. However, I am facing difficulties in managing the child elements within these divs. I am tryi ...

htmlcssbootstrap-4

Keypress Lagging woes: Latest Meteor Update

While I am updating a MongoDB model immediately upon keypress, it seems to lag behind due to the value being attached to that model. What would be the most effective way to update the model both on keypress and when refreshing the page so that the input re ...

javascriptmongodbmeteor