What is the best way to center text vertically on the same line when the vertical-align property is not functioning as expected?

Check out this example to see what I mean. You may need to zoom in to notice the issue http://jsfiddle.net/54NEa/

<div id="top">SomeText</div>
<div id="middle">SomeText</div>
<div id="bottom">SomeText</div>

div{
    display: inline-block;
    background-color: red;
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    line-height: 10px;
}
div.top {vertical-align:top;}
div.middle {vertical-align:middle;}
div.bottom {vertical-align:bottom}

Even though the line height is set to 10px, you'll notice that the text doesn't completely fill the space - there's some extra padding involved. In Firefox, the padding space is below the text, while in Chrome it appears above. This inconsistency occurs regardless of the vertical-align property or the font used. The text seems to "wiggle" and not align perfectly within its line height. Any suggestions on how to ensure that the font stays fixed relative to its line height across different browsers? I'm creating a small CSS button, and I want to guarantee that both the line height and text height are precisely 10px so that it looks consistent.

htmlcss

Answer №1

Make sure to adjust the line height so that it fits the element perfectly.

Snippet of HTML code:

    <div id="top"><span>SomeText</span></div>

div{
    height:30px;
    display: inline-block;
    background-color: red;
    font: 10px Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
}

span{
    line-height:30px;
}

Take a look at this fiddle for reference: http://jsfiddle.net/54NEa/1/

Answer №2

Another option is to modify the display of the div element to table-cell. While this can be an effective solution, it may come with its own set of consequences.

<div id="top">SomeText</div>
<div id="middle">SomeText</div>
<div id="bottom">SomeText</div>

div{
    display: **table-cell**;
    background-color: red;
    font: 10px/10px Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
}
div.top {vertical-align:top;}
div.middle {vertical-align:middle;}
div.bottom {vertical-align:bottom}

Answer №3

When working with the vertical-align property, remember that it only applies to inline elements. To tackle this issue, consider using a span instead of a div, or simply set display:inline on your divs.

UPDATE:

Don't forget to also specify the font-size and line-height for the container element. In my example, I utilized the body tag for this purpose. Additionally, changing the display property to inline should suffice since there doesn't seem to be a need for inline-block. Lastly, use unitless values for line-height.

Here is a link to a demonstration on JSFiddle

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

Node Webkit - Custom Save As Dialog Supporting Various File Formats

Is it possible to create a 'Save As' feature with multiple file format options using Node Webkit? I am looking for something similar to this desired result: https://i.sstatic.net/ifuxJ.png Currently, with native NW, I can only display two optio ...

javascripthtmlnode.jschromiumnode-webkit

There are certain CSS3 properties that are not being accounted for in the CSS min

I've incorporated several newer CSS3 properties in my stylesheet, but I'm concerned that the minification tool I'm currently utilizing may not be capturing all of these properties: .big-blue-button:hover { text-decoration: none; bac ...

javascripthtmlcssminify

Creating three-dimensional text in Three.js

My script is based on this documentation and this resource. Here is an excerpt of my code: <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> <script> var text = "my text", height = 20 ...

javascripthtmlwebglthree.js

Changing the color of the navigation bar using jQuery and implementing a scroll follow feature on

Looking to update the color scheme of my navigation bar and text links similar to this website: . I've searched for solutions but only found information on changing size, not the background color, and there's also a feature indicating the current ...

jquerycsscolorsnavigationuinavigationbar

Unresponsive AJAX calls in jQuery causing div elements to not display properly

I have created a simple form that dynamically retrieves data and sends it to another page. I want certain divs to be displayed on my page based on the retrieved data. The divs are being displayed successfully when checking without AJAX, but when AJAX is im ...

javascriptjqueryhtmlcssajax

A step-by-step guide to creating adorable rounded corners in a DIV element

I'd like to create a stylish rounded corner div on the top-right and top-left edges. I attempted it with the following code: border-top-left-radius: 5em; border-top-right-radius: 5em; Desired look of the div: https://i.stack.imgur.com/EoSvSm.jpg A ...

javascripthtmlcss

Having trouble getting CSS Animation to work in a React project?

I am currently developing a Next.js application using React. const partyButton = useRef(null) const handleParty = () => { setTimeout(() => { partyButton.current.classList.add('party-time'); console.log(party ...

javascriptcssreactjsnext.jsreact-hooks

Adding elements to list items

Here is some HTML code that I am working with: <div> <ul id="one"></ul> </div> I also have this code snippet for appending a li element to the ul: $("#one").append("<li id='libtn2630275Chat'><img id=' ...

javascriptjqueryhtml

Dealing with PHP's POST ARRAY and the magic of array_filter

Here is my PHP POST Array data: Array ( [book_count] => 2 [book_code_1] => 230 [book_name_1] => 20 [book_code_2] => 210 [book_name_2] => 40 [book_code_3] => [book_name_3] => 60 [book_code_ ...

phphtmlarrayspostmultidimensional-array

The HTML elements may have identical heights, but visually, one appears larger than the other

The size of the "login to enter chat" button seems to be larger than the messageBox div, despite adjusting padding and margins. What could be causing this issue? Any suggestions on how to fix this design glitch? #chatbox { width: 500px; height: ...

htmlcss

Understanding fluid design concept

Check out this example. I've noticed that when resizing the viewport, the font size within the .main class increases while there is no change in the .aside class. Can someone help shed light on this for me? Thank you in advance! ...

cssliquid-layout

Baffled by the intricacies of jQuery

As a newcomer to jQuery, I stumbled upon this code snippet and am curious about its function. It seems like it is replacing an element with the id reveal to a link with the class html5lightbox and id reveal. However, the part that puzzles me is $( '#r ...

javascriptjqueryhtml

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

What could be causing the Google Chrome inspector to insert strange ID attributes into various HTML elements?

Currently, I have a page set up on my localhost with the following code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Times</title> <style type="text/css" media="screen"> input{font:1.5e ...

htmlgoogle-chromelocalhost

CSS: Why are the beginnings of both texts not aligned?

I'm struggling to align these lines of text on the same left level, but I seem to be facing some issues. https://i.sstatic.net/bZIPV.png I've attempted it this way, however the output above is not what I expected. https://i.sstatic.net/cCFyw.png ...

cssreactjs

The synchronization between the First Column Scroll and Table Filter Function is out of alignment

I haven't coded for a while and my knowledge of JavaScript is still in its early stages, so please excuse me if this question seems a bit naive. Essentially, I've created code that filters an HTML table based on the items in the first column. Th ...

javascripthtmljquerycss

What is the best way to seamlessly integrate a Bootstrap Navigation and Carousel within a 100vh space?

I'm having trouble getting the bootstrap navigation and carousel to fit perfectly on the screen without any overflow. My goal is to have both elements occupy 100vh seamlessly, with no scrolling necessary. My first attempt was adding img-fluid: 100vh; ...

cssbootstrap-4

Executing JavaScript code only if certain date conditions are satisfied

I'm trying to come up with a way to execute a piece of JavaScript code when a specific date condition is met: For instance: Do not run the code if the date falls between June 6th, 2014 5PM CST and June 16th, 2014 5PM CST. Or maybe the opposite wou ...

javascripthtmlcriteria

Utilizing Bootstrap classes alongside custom CSS within Next.JS

Recently, I've been diving into the world of Next.JS and attempting to integrate it with Bootstrap. However, I've encountered a roadblock - the inability to combine Bootstrap classes with my own custom CSS classes within the className attribute. ...

htmlcsstwitter-bootstrapnext.js

Unable to expand Bootstrap navbar due to collapsing issue

I recently implemented a collapsed navbar on my website using bootstrap. However, I'm facing an issue where it does not open when clicking on the hamburger menu. After researching various solutions for this problem and trying them out, none of them s ...

javascriptjqueryhtmlcsstwitter-bootstrap