Align anchor tag text in the center vertically after adjusting its height using CSS

I'm having trouble vertically aligning the text within an anchor tag that has a height and background color set. The goal is to have equal amounts of space above and below the text, but currently all the extra height is being added below the text. I've tried various methods such as using padding, applying display: table and table-cell properties, and setting a line-height, but haven't had success yet.

You can see the issue in the provided codepen link, which demonstrates what I'm trying to achieve:

HTML:

<div class="border">
  <a href="#">Link</a>
</div>

SCSS:

.border { 
  display: inline-block;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  position: relative;
}

a {   
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 90%;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;

  &:hover {
    width: 100%;
    height: 100%;
  }
}
htmlcss

Answer №1

I have made some changes to your code pen snippet. You can review the modified code below or visit the original code on code pen by clicking this link: http://codepen.io/gauravshankar/pen/MYPEKw

body {
  background-color: #1d1f20;
}
.border {
  display: table;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  border-spacing: 10px;
}
.border:hover {
  border-spacing: 0px;
}
a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
}
<div class="border">
  <a href="#">Link</a>
</div>

http://codepen.io/gauravshankar/pen/MYPEKw

Answer №2

If your button contains only a single line of text, utilizing the CSS property line-height can help you adjust the vertical position of the label.

For example, by including

line-height: 50px;

within your a tag, you can effectively center it vertically. However, bear in mind that you may need to incorporate some animation if you desire it to remain centered during hover states as well.

Answer №3

Add line-height to <a> Check out the live demonstration

a {   
  line-height:55px;
  vertical-align:middle;
}

Update:

If you want the hover effect to align in the middle as well, make sure to specify the line-height. Here's an example:

a {  
    line-height:55px;    
}
a:hover {
    width: 100%;
    height: 100%;
    line-height:70px;
    position:relative;
}

See the updated demo here

Answer №4

body { 
  background-color: rgb(29, 31, 32); 
}

.border { 
  display: inline-block;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  position: relative;
}

a {   
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /*height: 80%;*/
  width: 90%;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;
  padding:12px 0px;
  
  &:hover {
    width: 100%;
    height: 100%;
  }
}
<div class="border">
  <a href="#">Link</a>
</div>

update to use padding instead of height

a {
display: inline-block;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 80%; */
width: 90%;
text-align: center;
color: #FFF;
font: 24px sans-serif;
text-decoration: none;
background-color: #2BD6C5;
transition: 250ms ease-in;
padding: 12px 0px;
}

Answer №5

To center the text, you can enclose the anchor within a button element.

Check out this JSFiddle demo

<div class="border">
  <button><a href="#">Link</a></button>
</div>

a {
  color: #FFF;
  text-decoration: none;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 90%;
  text-align: center;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;
  border: none;
  cursor: pointer;

  &:hover {
    width: 100%;
    height: 100%;
  }
}

Answer №6

Review this snippet of code.

body {
  background-color: rgb(29, 31, 32);
}

.border {
  display: inline-block;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  position: relative;
}

a {
  display: inline-block;

  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 90%;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;
  line-height: 55px;

}
a:hover{
  width: 100%;
    height: 100%;
    line-height: 70px;
}
<div class="border">
  <a href="#">Link</a>
</div>

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

Emails sent through an HTML form submission should always include a valid "from"

I am currently in the process of creating a feedback form that allows individuals to provide anonymous feedback. I have explored nodemailer and node-sendmail, but I have encountered an issue with both requiring a from address. While I am aware that this ca ...

javascripthtmlnode.js

Designing a dynamic 1-3 column arrangement with Angular for animated content

Let's discuss the current setup: I am in the process of creating a webpage for an application that includes a navigation bar, a footer, and a 3-column body layout. Initially, only one column is visible. This primary column will contain interactive d ...

angularjscss

Is it acceptable to conceal items by utilizing display:none?

When dealing with a dynamic website that includes components from various plugins, is it acceptable to hide elements temporarily or permanently using display:none? Sometimes clients may request certain items to be hidden from the page, so instead of removi ...

cssxhtmlseoscreen-readers

Strategies for styling the contents within <details> while excluding <summary> in CSS

I'm attempting to apply a 10px padding to the Story box using CSS, without introducing any additional HTML elements into the website code. Is there a way to include the padding in the Story box without incorporating a new HTML element? To clarify: H ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

Is it possible to modify the CSS styling in React using the following demonstration?

I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overl ...

javascriptcssreactjstypescript

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

javascripthtmlalgorithmweb-applications

Hiding a related field using a designated delimiter can be achieved with JavaScript

I am looking to create a function that hides the corresponding textarea field of a dropdown. This functionality will be utilized in multiple instances, hence the need for it to be within a function. <div id="formElement1" class="field"> <labe ...

javascriptjqueryhtml

embedding HTML code directly into an iframe

Can HTML be directly inserted into an iframe within my HTML template? Would the following code be considered valid? <iframe> <html> <head> </head> <body> <p>Hello world</p> </body> ...

htmliframe

Viewport height-responsive image not functioning as expected in Firefox browser

Is there a way to set an image to the 100% height of the browser window, with a small padding at the bottom, and have it centered on the page? I created an example in codepen that works well in Chrome and Safari, but not in Firefox. In Firefox, the image ...

imagefirefoxresponsive-designcss

Insert data into a drop-down menu and organize it

When I choose a value in one Select, the other options are removed and the previous value is added to them. How can I use JQuery to add the previous value to Select and then sort it alphabetically? ...

javascriptjqueryhtml

Chromium CSS blend mode problem

Can anyone help me create a Photoshop overlay effect on my website? My code works perfectly in Firefox, but it's not functioning correctly in Chrome. Here's the demo. This is my current code: HTML <img src="http://lorempixel.com/output/fash ...

htmlcssgoogle-chrome

HTML5 input placeholder adapts its size and position dynamically as data is being

During my interaction with the input fields on my bank's website, I noticed that the placeholder text undergoes a unique transformation. It shrinks in size and moves to the upper-left corner of the input field while I am entering information. Unlike t ...

javascriptjquerycsshtml

Challenges with implementing TailwindCSS classes in a Next.js application

I've encountered some issues in my nextJS app with utilizing certain TailwindCSS classes such as top, left, or drop-shadow. Even after attempting to update Tailwind from version 1.9.5 to 3.3.3, I have not seen any changes. I believe that I am import ...

javascriptcssreactjsnext.jstailwind-css

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

jquerycssangulartypescript

Animate a div once the parent section becomes visible while scrolling

I previously had this function working, but it seems that I have somehow messed it up in the process. My current setup includes a scroll hijack feature that navigates users to a new section or card each time they scroll. The script adds a visible class w ...

javascriptjqueryhtmlcssscrollview

Having trouble with the <img> tag on CodeSandbox.io? Image not loading properly

I've been attempting to insert an image using the <img> tag on CodeSandbox.io. However, each time I try to do so, it fails to display and defaults to the alt tag (Shows Mountain). The goal is to load an image from the same folder as the file th ...

htmlcssreactjscodesandbox

IE does not support Overflow and Ellipsis in this table

FF v14 has the exact appearance I want. Unfortunately, IE9 is not cooperating as it does not hide overflow or display the ellipsis. Does anyone know how to resolve this issue for compatibility with IE9? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

htmlcsscross-browser

Is there a way to display a div element just once in AngularJS?

I only want to print the div once and prevent it from printing again. $scope.printDiv = function(divName) { var printContents = document.getElementById(divName).innerHTML; var popupWin = window.open('', '_blank', 'width=300, ...

javascripthtmlangularjs

Extension for Chrome - Personalized pop-up notification when page loads

I am looking to create a custom alert box that triggers on page load instead of the default one, which I find unattractive and possibly irritating for users. alert('hello'); My current approach involves the following code: manifesto.js "cont ...

javascripthtmlcssgoogle-chrome-extension

Find the line containing the selected text within a JavaScript code

I am working on a contentEditable div where users can enter multi-line text. I need to be able to inspect the line that the user is currently typing in when they press enter. Is there a way to retrieve the context of that specific line (or all lines)? Is ...

javascripthtmlcsstextselection