I'm having trouble aligning my 'a' element that I'm trying to use as the close button for my modal component. Why is it not centering?

I have successfully created a styled "a" element that functions as a close button for a modal, redirecting you to the home page when clicked. However, I am facing an issue with vertically centering the "X" within the button. Enclosing it in a "button" element caused further problems. Below is the relevant code:

:root {
  --main-color: #ffc40c;
  --secondary-color: lightyellow;
  --main-red: #d9001d;
  --secondary-red: #ff033e;
  --dark-color: #444;
  --light-color: #fafafa;
}
body {
  font-family: "Source Code Pro", monospace;
  background-color: var(--light-color);
  color: var(--dark-color);
  margin-top: 50px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  text-shadow: 1px 1px 5px var(--light-color);
}
a {
  text-decoration: none;
}
.close-button {
  height: 30px;
  width: 30px;
  background-color: var(--light-color);
  color: var(--main-red);
  margin-left: 0.5em;
  border: 2px solid var(--main-red);
  border-radius: 50%;
  font-weight: 700;
  text-align: center;
}
.close-modal {
  position: fixed;
  top: 2.8em;
  right: 1.7em;
}
<a class="close-button close-modal" href="#!"> X </a>

Does anyone know how to properly achieve vertical centering for this button?

htmlcsscentercentering

Answer №1

One handy trick for aligning elements at the center is by using the CSS properties display: grid; and place-items: center;. Give it a shot by applying these styles to the .close-button class.

Answer №2

Consider utilizing flexbox to properly align elements.

I made the following additions:

display:flex;
justify-content:center;
align-items:center;

to your .close-button class.

Take a look at the updated outcome below.

:root {
  --main-color: #ffc40c;
  --secondary-color: lightyellow;
  --main-red: #d9001d;
  --secondary-red: #ff033e;
  --dark-color: #444;
  --light-color: #fafafa;
}
body {
  font-family: "Source Code Pro", monospace;
  background-color: var(--light-color);
  color: var(--dark-color);
  margin-top: 50px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  text-shadow: 1px 1px 5px var(--light-color);
}
a {
  text-decoration: none;
}
.close-button {
display:flex;  /*flexbox for flexible layout */
justify-content:center; /*horizontally centering*/
align-items:center; /* vertically centering*/
  height: 30px;
  width: 30px;
  background-color: var(--light-color);
  color: var(--main-red);
  margin-left: 0.5em;
  border: 2px solid var(--main-red);
  border-radius: 50%;
  font-weight: 700;
  text-align: center;
}
.close-modal {
  position: fixed;
  top: 2.8em;
  right: 1.7em;
}
<a class="close-button close-modal" href="#!"> X </a>

Answer №3

To style your a tag effectively, include padding-top with a value of 10px

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

When attempting to select an option from the dropdown menu, I encounter an issue where the

My code is not behaving as expected. Whenever I click on the child elements, the dropdown changes to display: none. I am encountering an error when clicking on the input frame and displaying:none. How can I resolve this issue? I would like to be able to ...

javascripthtml

Prevent a function from executing using ClearTimeout()

Looking for a way to control the progress of my progress bar using two buttons. Here's the code snippet: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0 /jquery.min.js"></scr ...

javascripthtml

Executing a script on a different HTML page without the need to reload it

I'm currently working on incorporating a notification system inspired by Facebook's design. This system will feature an icon in the header that, when clicked, reveals a drop-down containing a table of sorted notifications for the user. My goal is ...

jqueryhtmlajaxfacebookperl

Text is being truncated in the title instead of moving to the next line

<View style={{ flexDirection: 'row', alignItems: 'center', height: 130, marginVertical: 10, overflow: 'hidden' }} > <Image sour ...

cssreact-native

What is the best way to create an arrow connecting a parent div to multiple child divs?

I'm faced with a challenge involving a reusable React list component that supports nested children. My goal is to visually connect the parent div to its direct children using arrows, similar to the image linked below. View List Component Image Below ...

javascripthtmlcssreactjshtml-lists

What is the fate of a JavaScript event bound to an element once the element is deleted?

Imagine having an element like this: <section id="container"> <div id="curious">hey, there</div> </section> Once the DOM is loaded, an event is bound to the element as follows: $('#curious').click(function (){ ale ...

javascripthtmljquerydomjquery-events

Attempting to utilize a Jquery Ajax post method to retrieve information from my specified URL and display it within my HTML Div element

Seeking assistance in fetching real-time data using a jQuery Ajax Post method. My experience lies mainly in SQL and C#, so coding in this language is relatively new to me. I was advised to use this script, which seemed straightforward. However, despite my ...

jqueryhtmlajaxasp.net-ajax

Why is the dropdown bootstrap component not functioning in the browser?

The dropdown-item in my code, taken from the Bootstrap site, is not working properly. The toggle displays but the item does not. What could be causing the Bootstrap dropdown component to malfunction in the browser? Are there any issues with my CDNs? ...

cssdrop-down-menufrontenddropdownbootstrap-5

The Toggle Functionality necessitates a double-click action

I'm currently working on implementing a menu that appears when scrolling. The menu consists of two <li> elements and has toggle functionality. Everything is functioning properly, except for the fact that the toggle requires two taps to activate ...

javascripthtmlcss

Clickable links in a Bootstrap dropdown menu not working with @URL.Action

Utilizing the most recent versions of Bootstrap and jQuery, I have constructed a navbar that connects to various actions within the controllers. The issue I am encountering is that when attempting to utilize one of the links within <li class="nav-item ...

jqueryhtmlasp.net-mvcbootstrap-4navbar

Adjusting the alignment of table cell contents without the use of JavaScript or external CSS files is necessary

I need help creating a table that resembles the design shown in the image below. I want each td cell in the outer table to have a number at the top right with a border, and text at the bottom left without a border: https://i.sstatic.net/1YTkR.png Current ...

htmlcss

What is the more effective option: utilizing the bootstrap offset feature or inserting an empty div?

<div class="col-xs-3"></div> <div class="col-xs-6 col-sm-6 col-md-6" style="min-width: 320px;"> </div> OR <div class="col-xs-6 col-md-offset-3 col-sm-offset-3 " style="min-width: 320px;">` </div> I would like to remo ...

cssbootstrap-4

Clicking on an item causes it to move to the following line

Whenever I click on the third (bottom) line in the pagination block, the number item 30 keeps jumping to the next line. You can see it happening here. This issue only occurs in the Chrome browser. It seems like there might be a problem with the CSS. Can ...

htmlcss

Is there a way to modify the appearance of a text box to suit individual preferences?

Is it possible to alter the shape of a text box, creating a rectangle with a portion removed from one side? I have included an example image for reference. https://i.sstatic.net/oNyum.png I came across clip-path: polygon in CSS, but it seems to only accep ...

htmlcsstextbox

Curved interior box

I have been attempting to design an 'inside curved box' without much luck, I can't seem to locate any online examples. Could someone assist me in creating this using CSS or possibly SVG? https://i.sstatic.net/SGvm0.png ...

htmlcsssvgcss-shapes

Compel the system to handle the file as if it were an

I am currently showcasing programming files on a website in plain, raw text format. I have now decided to implement syntax highlighting using HTML. While it has enhanced the appearance and functionality of the files, there is one issue - I need to create a ...

html

Determine the sum of the values in a column using Angular

I have a collection of objects with a 'quantity' field that I want to aggregate and display on a review screen within a table. My array consists of administrations with various object fields, and my focus is on calculating the total of the &apos ...

htmlangulartypescript

Is there a way to dynamically change the height in jQuery/JavaScript?

I am encountering an issue with my embed code where the height changes randomly after a few seconds, depending on certain parameters. Here is an example of the code I am using: $( <embed></embed>) .attr("src", "http://www.bbs.com") ...

javascriptjqueryhtmlcss

Can an RMD file access a CSS variable?

In my .Rmd file, I am interested in adjusting the style based on whether it is viewed on a mobile device or not. Checking window width with @media in CSS makes this task simple. Let's consider a scenario where there is a root variable --mobile: 1; ...

javacssrr-markdown

Setting the selected option in a Razor HTML Select/Option after a postback

Currently, I have a HTML select element with 3 options. My goal is to specify which option should be selected after a post back on my form. The technologies I am using include Razor (C#), HTML, jQuery, and CSS. If possible, I would like to achieve this ...

jqueryhtmlrazor