What could be causing the vertical alignment to be disrupted by the img tag in relation to line-height?

Trying to vertically align text within a div by adjusting line height to match div height has been successful with just text or small images. However, when larger images are added to the div, it causes the text to be pushed downward for some reason. Take a look at this fiddle that demonstrates the issue.

The fiddle contains 4 divs each set with height: 40px and line-height: 40px. The difference among them is that the 2nd, 3rd & 4th divs include images of varying sizes - small, medium, and large:

 .small{height:20px;}
 .medium{height:30px;}
 .large{height:40px;}

What is causing the alignment problem with the third and fourth images?

htmlcssvertical-alignment

Answer №1

Make sure to include vertical-align: middle in your img tag, as it is not just an ordinary inline element, but rather an inline-block element.

Check out the latest version on Fiddle

Keep in mind that your method of vertically aligning may not be effective if your text spans more than one line. Consider using flexbox for alignments, it offers some great features :)

Answer №2

Under each image, there is a small space provided. By default, the image is displayed inline (technically as inline-block), resembling a letter and positioned on the same line as other letters. Below that line, there is empty space for descenders commonly seen in letters like j, p, and q.

To change the position of the image, you can adjust its vertical-align property. For example, setting it to vertical-align: middle; would work well in this case.

This issue is further explained in the following answer: Mystery white space underneath image tag

Answer №3

Vertical alignment has always been a tricky thing to nail down - consider exploring some articles on the subject for more insights.

My initial suggestion would be to try using vertical-align:middle on each of your images, but keep in mind that results can vary between different browsers and may require some experimentation.

An alternative solution that seems to work across all browsers is to create a 2-column table (possibly within the div container) where you place text in one cell (which will automatically be vertically centered) and then insert the corresponding image in the next cell (automatically adjusting to the height of the image).

Tables can actually be quite helpful in situations like this, although not everyone is a fan of using them...

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

The navigation bar isn't turning into a hamburger menu - using bootstrap and Flask

My mobile responsive navbar is not rendering correctly on smaller screens. Check it out here: I am using Bootstrap Material Design with Flask and this is the code snippet for my nav-bar: <!-- Navbar --> <nav class="navbar navbar-expand-lg na ...

cssnavbarbootstrap-4

Utilizing FormHelper in CakePHP to send search query to controller parameter

How can I pass a form directly to a controller parameter in CakePHP 2.4? The controller expects the parameter in the format /Model/index/by:keyword, but FormHelper is adding a question mark and an equals sign into the URL: Model/index?by%3A=keyword. Here ...

phphtmlformscakephpget

CSS Troubleshoot: Unable to Change Background of Current Menu Page Item

I've been attempting to add a small graphic using CSS to indicate the current page the viewer is on, but for some reason, it's not highlighting properly. Below is my code: HTML: <ul class="side-nav"> <a href="http://www.cieloazulsant ...

htmlcssnavigation

The jQuery script designed to verify the page height doesn't appear to be functioning as intended

Below is a snippet of jQuery code that I'm working with: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> hasVBar=""; hasHBar=""; $(docume ...

javascriptjqueryhtmlcssdom

The issue with hyphens (dashes) not displaying properly in resx resource files on IE7/8

Currently, I am tackling an MVC project that incorporates localization through resource files. Interestingly, all non-English characters appear to display correctly in Internet Explorer 7 & 8, except for hyphens. Instead of displaying the hyphen, it simpl ...

asp.nethtmlinternet-explorerlocalizationresx

Retrieve the specified text style calculation in Python without having to render the full HTML page

Suppose I have an HTML input html='''This is <b>Bold</b> or <strong>Also Bold</strong> or even <font style="text-weight: bold">Style Bold</font>''' My goal is to extract only the bold word ...

pythonhtml

"Unlocking the Power: Bringing Data from the Backend to the Frontend with ASP.NET OnClick

As I delve into the code of my current project, I find myself deciphering the work of a previous developer. Specifically, I am grappling with the usage of Eval in HTML forms. Within my HTML form, there is an onclick action that triggers the download of a ...

c#htmlasp.net

Clicking yields no results

let link = '<a href="javascript:void(0);" (click)="redirectToPage(store)" class="btn grey">' + displayText + '</a>'; Upon clicking the button on the page, nothing seems to be happening. Can you help me figure out what I&apo ...

htmlangular

Tips for aligning a div below another div nested within a separate container

Can I position div#d2 directly beneath the div#d1 container according to the code below, instead of positioning it outside the height of the wrapper? #wrapper { height: 100%; display: flex; background-color: steelblue; align-items: center; min ...

htmlcsscss-positionflexbox

Button placed incorrectly

I am utilizing bootstrap 4, thymeleaf, and datatable I attempted to place a button on top of the table to the right <div class="col-sm-12"> <div class="float-right"> <button id="newUsers" type="button" th:onclick="@{/newusers ...

javascripthtmlcssdatatablesbootstrap-4

Modifying the CSS will not be reflected in the appearance

Currently, I am facing an issue on a website where I cannot make any changes to the CSS stylesheet. Whenever I attempt to modify a style, it appears to work temporarily but then reverts back to its original state once I release the mouse. It seems like the ...

cssdreamweaver

display a div based on the user's choice

I am working with the following http://jsbin.com/useqa4/10 My query revolves around hovering over li elements in the submenu using the code snippet below: $(".submenuList li").hover(function () { $(".submenuCurrent").removeClass("submenuCurrent"); $( ...

jquerycsslistmenu

Error: The function 'check' is not defined and cannot be called when the 'on

My aim is to display the "expandrepeat" div when a specific select option is chosen. Unfortunately, the code below doesn't seem to be working as intended: <script> window.check=function(elem) { if (elem.selectedIndex == 1) { documen ...

javascripthtmlvue.js

Having trouble retrieving JSON data from the open weather API

I'm working on a small website to display the weather of a specific city using an API. However, I am facing an issue where I can't seem to display the temperature from the response. Below are snippets of my JavaScript and HTML files: var ap ...

javascripthtmljsonapi

Full image with stylish CSS text overlay

I'm having trouble displaying an overlay text that should look like: https://i.sstatic.net/GccZy.jpg This is what I've tried: <div class="row"> <div class="col-md-3 program-cat"> <img src="<?php ech ...

htmlcssoverlay

The location of the footer is not aligned correctly

Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself. Here is a snippet from my calendar.html file: {% extends 'base.html' %} {% ...

htmlcssdjango

CSS that relies on the presence of a specific class

I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...

cssangulartailwind-css

How can we activate navigation on a mobile browser?

I am currently working on a small HTML5/JavaScript website designed to be accessed by mobile browsers on devices such as Android and iPhone. I am utilizing the geolocation feature of HTML5 to obtain the user's current location, but my goal is to then ...

javascriptandroidhtmlgoogle-mapsnavigation

What is the best way to resize a div to fit its content if 'clear:both' and 'float:left' are not working as desired?

I've been struggling to find a solution for an issue with my HTML. I have three 'divs' that need to display different information in their own line, enclosed in a parent element with a centered border. Despite trying solutions like inline-bl ...

htmlcssvue.jscss-floatwidth

Fluidly move through spaces where subsequent elements align to the top level

In the black container, there is an {overflow:hidden;} CSS property applied The yellow blocks are ordered in code according to the numbers and have {float:left;} I am aiming for the 5th element to align with the element above it: However, currently this ...

htmlcsscss-float