Center align the text inside a table cell of a span that is floated to the right and has a varying

Struggling to align a span vertically in the middle with a different font size than its table cell. The goal is to have the following layout:


|                                                           |
| Measurement (font-size: 100%)        unit (font-size: 70%)|
|                                                           |

This is how my markup looks:

<td class="value">Performance <span class="unit">kW</span></td>

The unit span is aligned right within the cell using float:right, while the entire cell has vertical-align:middle styling. However, this combination does not produce the desired result. It appears the floating style causes the unit span to align at the top where the text "Measurement" begins.

http://jsfiddle.net/Lszdx2hd/

Removing the floating style from the second span in the provided reference demonstrates the effect.

Is there a simple way to achieve the desired layout without adding more markup or using floating styles? Attempts with relative positioning did not seem to allow for proper vertical centering of the unit span.

Thank you!

htmlcsscss-float

Answer №1

To ensure the elements are properly aligned, float both of them and adjust the line-height of the second span to be double that of the first span since it has 50% of the font-size. You can reference this example: http://jsfiddle.net/Lszdx2hd/1/

span {
  font-size: 40px;
  line-height: 1;
  float: left;
}

span + span {
  font-size; 50%;
  line-height: 2;
  float: right;
}

This method ensures consistent alignment regardless of changes in the font-size or height of the first span.

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

Don't display div if database has certain value - Angular

Is there a way to determine if a specific value exists in a PostgreSQL database? If so, can I then hide an HTML element based on this information? Can CSS and JavaScript be used to hide elements, or is there another method that should be utilized for hidi ...

javascriptcssnode.jsangularpostgresql

What is the best way to make my page headers resize with a responsive layout?

Currently, I am working on a website that needs to be fully functional on both mobile devices and computers. I have successfully implemented Bootstrap-responsive to make many elements work, but now I am focusing on the hero-unit for the homepage. Specifica ...

csstwitter-bootstrap

Using HTML input checkboxes in conjunction with a JavaScript function

After creating a basic payment form using HTML/CSS/JS, I wanted to implement checks on user inputs using HTML patterns. In addition, I aimed to display a pop-up alert using JS to confirm the form submission only after all necessary inputs are correctly fil ...

javascripthtmlcss

What could be causing the movement of my main navigation links when hovering over another top-level element?

I am struggling to pinpoint the origin of a particular issue I am encountering with my menu. The problem arises when I hover over a top-level element, causing all elements below it to shift to the right: (Take note of the top-level elements being affected ...

htmlcss

Maintain the central alignment of the entire page (including the horizontal scrollbar) while zooming in

I have successfully centered elements, but now I am trying to center the entire page (i.e. have the horizontal scrollbar in the middle) when zooming in. Currently, the scrollbar stays at the very left end as I zoom in. * { margin: 0; padding: 0; box ...

css

Challenges faced with Vuetify's vertical and non-linear stepper components

I've been struggling to grasp the concept of Vuetify's stepper feature. Despite my efforts, I haven't been successful in combining different steppers from their page that each have elements I need but lack others. One example is this one on ...

javascripthtmlvue.jsvuetify.js

Ways to define a variable based on a CSS class attribute?

I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected. var dist = $('.nav').css(width()); The goal of my script i ...

javascriptjquerycss

Hiding an element with display: none will prevent the hover effect from

I have integrated a CSS dropdown menu from this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button Additionally, I am utilizing jQuery .on("click", event with an AJAX call. Following the successful AJAX call, I am using the foll ...

jquerycssdisplay

Adding a data attribute to a Material-UI Button: A step-by-step guide

I'm trying to include a custom data attribute in the Material-UI Button Component as shown here. Here's what I attempted: <Button inputProps={{ 'data-testid'='clickButton' }} > Click </Button However, this approach ...

htmlreactjsmaterial-ui

Dynamically populate 7 select boxes with options using JQuery

I have a webpage that includes 14 different dropdown menus, one for each day of the week (Monday to Sunday). Each day has two dropdowns: one for opening time and one for closing time. I used jQuery to populate all 14 dropdowns with a pre-defined list of ho ...

javascriptjqueryhtml

Creating a JavaScript-powered multi-department form: A step-by-step guide

Is there a way to maintain the form displayed on a webpage created in HTML5 and JavaScript for logging calls across three different departments? With buttons assigned to each department, clicking on them reveals the respective HTML form. That said, every t ...

javascripthtmlcss

Script to pop up cancel alert box

There's a dilemma with this code - if you click CANCEL the first time the box pops up, it continues to run. I'm unsure of how to make it redirect to the underlying page when clicked on cancel for the first time. var numero= prompt ("Enter a nu ...

javascripthtmlcssalert

Set the userID variable as the assigned value and the username variable as the ng-model attribute for a select

Seeking assistance with a coding dilemma. Currently working on an ASP.Net MVC and AngularJS application, where I am utilizing the select tag to display a list of users. Both the select tag and a div are connected via the same ng-model for real-time binding ...

htmlangularjsasp.net-mvc

Ways to heighten the `RadComboBox` `DropDownHeight` featuring `Templates`

One of the challenges I'm facing involves a RadComboBox setup like this: <telerik:RadComboBox ID="RadComboBoxNames" runat="server" Width="470px" DropDownAutoWidth="Enabled" MaxHeight="363px" Skin="MySkin" EmptyMessage="Select" High ...

cssasp.netvb.nettelerikradcombobox

The Best Way to Refresh a ReactJS Component in Plain HTML/JavaScript

So here's the situation. I'm diving into creating a React Modal component that can seamlessly integrate with any vanilla HTML / JS file. By generating a bundle.js file using Webpack from my React component, it becomes easier to inject it into a d ...

javascriptjqueryhtmlreactjsdom

Deactivating a widget on one of my web pages

I'm looking to disable a widget on certain pages. Does anyone know how to do this? One idea I had was to add a condition in the HTML (using Django or PHP?) of the widget that would make it only appear if the site URL is not the one where I don't ...

phphtmldjangoif-statement

Show image details on hover?

I have six images displayed full width using a flex grid. I would like the image information (along with a visit button) to appear on hover, and the brightness of the image should decrease. I am struggling to position the information in the center of the i ...

htmlcss

Fonts appear altered on a Windows computer

Working on my new website watr.io, I've noticed that the font appears differently on Windows versus Mac. The one displayed on Mac is the desired outcome, but I can't seem to figure out what's causing the discrepancy. I've been troublesh ...

htmlcssmacostwitter-bootstrap

Steps to extract a hash from a document's URL

The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...

javascriptjqueryhtmlcss

Tips for assigning dynamic #id(*ngFor) and retrieving its value in Angular2

In my HTML file, I have the following code snippet: <tr *ngFor="let package of packages"> <td *ngFor="let coverage of coverages"> <input type="hidden" #dynamicID [value]="coverage.id"> <-- Include an identifier with the vari ...

htmlangulardata-binding