Vertically align the center span

I am working with the following code:

a {
      background: #A9A9A9;
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 20%;
      vertical-align: middle;
      float: right;
      text-align: center;
    }
    a span {
      display: inline-block;
      vertical-align: middle;
    }
<a href="#"><span>Center</span></a>

I am trying to vertically center the span within the a element, which is set as position: absolute;.

css

Answer №1

For spanning elements and aligning them at the center, you can use position:relative along with top:50%.

a {
background: #A9A9A9;
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20%;
vertical-align: middle;
float: right;
text-align: center;
}

a span {
display: inline-block;
position: relative;
top: 50%;
transform: translate(0px, -50%);
}
<a href="#"><span>Center</span></a>

Solution 2:

To achieve a similar effect, you can also utilize display:table and display:table-cell.

a {
background: #A9A9A9;
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20%;
vertical-align: middle;
float: right;
text-align: center;
display:table;
}
a span {
display: table-cell;
vertical-align: middle;
}
<a href="#"><span>Center</span></a>

Answer №2

Flexbox is a fantastic choice for this scenario. Just remember to verify vendor prefixes and browser compatibility:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

a {
background: #A9A9A9;
display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
}

a span {
  
}
<a href="#"><span>Center</span></a>

Answer №3

a {
background: #A9A9A9;
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20%;
vertical-align: middle;
float: right;
text-align: center;
}

a span {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 50%;
bottom: 0;
height: 16px;
margin-top: -8px; /* height/2 */ 
}
<a href="#"><span>Center</span></a>

Answer №4

consider making changes to your style for improvement

 a {
    background: #A9A9A9;
    display: table;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20%;
    vertical-align: middle;
    float: right;
    text-align: center;
}

a span {
    display: table-cell;
    vertical-align: middle;
}

<a href="#"><span>Center</span></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

In order to eliminate the underline in Bootstrap links, I am seeking a solution

I have encountered a similar issue before, and the solution proposed involved making changes via CSS. Despite my attempts, I have been unsuccessful in replicating the solution with my own code. Currently, the link appears as follows: I have also referred t ...

cssreactjshyperlinkreact-bootstrap

How can I customize the appearance of an iframe using CSS?

Simply put, I've uploaded a video to Google Drive that I want to embed on my website. The embed code I got from the shared-video page for the video is: <iframe src="https://drive.google.com/file/d/0B8DK7pele_HjWUR6Ym9KNFU5YTQ/preview" width="640" ...

javascriptjqueryhtmlcssiframe

Tips for displaying cards with responsive design utilizing Bootstrap 5

How can I display cards responsively for mobile, desktop, and iPad? My goal is to have: - One column for mobile - Two columns for iPad - Four columns for desktop The current code only works for mobile and desktop, not for iPad. On my iPad, it's sh ...

cssresponsive-designbootstrap-5

Why should I set the width of the header to be larger than the body in order to fully cover it?

I've set my header width to 106% to span the entire page length, while the max-width for my body is kept at 95%. body { background-color: #333; max-width: 95%; font-family: ivyjournal, sans-serif; margin: 0; padding: 0; overflow-x: hidd ...

htmlcss

Seeking assistance with organizing a navigation bar in html and CSS

Just starting out with HTML and CSS and working on creating a website. I'm starting with the navbar, but I'm facing an issue with scaling for different screen sizes. In full screen, it looks fine, but when minimized, the "About" part on the right ...

htmlcssnavbar

BorderWoocommerce

Something odd has appeared around my shopping cart total ("WARENKORB SUMME") today. Could you please take a look at the screenshot below? Any idea how to remove it? This is for a Wordpress/WooCommerce store. I haven't made any recent changes - I su ...

csswordpresswoocommerce

The CSS overflow property does not seem to be functioning properly when applied to a span element that

Here is my current setup: http://jsfiddle.net/YKXUb/1/ My CSS looks like this: .two { height: 100%; width: 100%; border:1px solid green; } .hold { float: left; height: 100%; width: 35%; border:1px solid green; } .right { hei ...

htmlcss

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

javascripthtmlcssdojo

What is the best method for capturing a select menu using form submission?

I've been working on a website with Bootstrap 5 and hosting it through GitHub pages. Additionally, I integrated a form on the site using Bootstrap 5 and utilized Formsubmit to send form submissions to my email address. However, I encountered an issue ...

htmlcssgithubfrontendbootstrap-5

Create a section and a div with a set size in HTML

I'm having trouble setting the height of a div within a section to 100px. Despite my efforts, the height keeps reverting back to 'auto' and adjusts based on the content inside the div. Below is the HTML code: <section id="social" class= ...

javascriptjqueryhtmlcssgoogle-chrome-extension

CSS Menu Expansion Error in Just Two Lines

My CSS-only menu is causing some trouble by expanding to three lines whenever a submenu option on the first line is clicked. The issue only occurs with options in the middle, as it shifts everything out of place and onto another line. Expected behavior: ...

htmlcssdrop-down-menumenu

Exploring the functionality of Jquery with the :active selector

Here is the code I have been working on: $('#ss a:active').parent().addClass('ss-active'); It seems like my code is not functioning as expected. Can you help me figure out how to achieve my desired outcome? Additionally, I want the bu ...

jqueryhtmlcsscss-selectors

Is it possible to have the background blurred, but only specifically behind the overlay?

How can I make the div appear as if it is blurring the background image of the page, even when the position of the div is changed? Also need to ensure it works seamlessly during window resizing. ...

css

Combine table cells to improve readability on smaller screens

I currently have a setup designed for larger screens: <table> <thead> <tr> <th>title and image</th> <th>description</th> </tr> </thead> <tbody> ...

javascripthtmlcssresponsive-designhtml-table

Creating an HTML button to reveal additional text on the same page

Currently, I am working on a project involving html and javascript. My issue lies in displaying multiple options on the same webpage without switching pages. Essentially, I have a plot and a few buttons on one page, and when a user clicks on any of these b ...

javascripthtmlcssbutton

Can you explain the significance behind this unorthodox CSS code?

Assisting a customer in updating their Shopify theme. The previous designer used an unconventional method to establish the grid system. I require assistance in decoding the code. I came across an old article on this topic but still couldn't grasp it. ...

csscss-selectors

How can I efficiently utilize HTML/CSS/JS to float items and create a grid that accommodates expandable items while minimizing wasted space?

After meticulously configuring a basic grid of divs using float, I've encountered an issue. When expanding an item in the right-hand column, the layout shifts awkwardly. My goal is to have boxes A and B seamlessly move up to fill the empty space, whi ...

javascripthtmlcssuser-interfacecss-float

Utilizing PNG images with color in CSS, HTML, or JavaScript

On my website, I have an image in PNG format. I am wondering if there is a way to change the color of the image using HTML5, JavaScript, or CSS. Ideally, I would like the image to be changed to white by inverting its colors (changing black to white, not al ...

javascripthtmlcssimagepng

Is it feasible to utilize a CSS variable within a CSS "background URL" property?

Having trouble setting a base domain for all my pictures in a CSS file. Here's what I've tried: In global.css: :root { --bgd: #C0C0C0; --picdomain: "https://somedomain.com/"; } In s1.css: @import url("global.css"); body { background-co ...

cssbackground-imagecss-variablescss-import

Steps for Creating an Animation Tool based on the Prototype:

One question that recently came up was: What is the best approach to tackling this issue? Developing a tool that enables designers to customize animations. To make this process easier, it is essential to create an AnimationSequence using JavaScript that ca ...

javascriptjquerycssanimationjquery-animate