Utilizing vertical-align with a background-image for an element

<style type='text/css'>
#span1{
background-image:url("http://www.reoiv.com/images/rss.jpg");
background-repeat:no-repeat;
cursor:pointer;
display:block;
float:left;
height:15px;
width:15px;
vertical-align:text-bottom;
}
</style>

<span id='span1'></span>觀看次數

My goal is to achieve the vertical align effect using text-bottom on an element with a background image. However, when I try this method, the text does not align correctly as desired. If you input the provided code on this website: , you will notice the misalignment.

I am seeking advice on how to accomplish this without adding extra HTML elements if possible.

Thank you in advance for your help!

Answer №1

Before your text, you mistakenly closed the span tag:

<span id='span1'></span>Watch count

Instead, use this corrected code:

<span id='span1'>Watch count</span>

I hope this resolution is helpful.

Answer №2

Employing floats won't achieve the desired effect. Consider implementing display: inline-block as an alternative, although its compatibility with various browsers may be uncertain.

UPDATE: http://www.quirksmode.org/css/display.html

Answer №3

It's impossible to achieve perfect pixel results. However, I have a workaround that I've found helpful:

<span style="background: url(http://www.reoiv.com/images/rss.jpg) no-repeat left center; padding-left: 20px;">Watch Count</span>

By using this method, the icon is nicely aligned vertically with the text. The padding-left property pairs well with inline elements.

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

What is the best way to insert two rows directly in the middle of two Bootstrap columns?

I need to align two rows in a straight line. Similar to the example shown in the image below: https://i.sstatic.net/EwRat.png After that, I want to split the Bootstrap into two columns, one with col-md-8 and the other with col-md-4. In the col-md-8 col ...

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

Switching the link text in a Bootstrap navbar when hovered over

Is there a way to change the shortened text in my Bootstrap 4 navbar links to display the full text on hover? The full text is available in the title element and I would also like to add a small change animation for extra effect... Thank you <div class ...

The CSS transition timing seems to be malfunctioning as not all elements are smoothly transitioning, specifically the text within the li and anchor tags is not

I'm attempting to achieve a smooth transition effect on a navbar when hovering over it, changing the color from one to another. The navbar contains a list of words, but I am encountering an issue where during the transition, there is a quick flash (ap ...

Align pandas data frame to the right within a Flask application

My current project involves creating an API in Flask. One of the requirements is to display a pandas dataframe right next to the upload button on the web page. While I have been able to find information online about justifying column headers or text, I hav ...

The images on my website are not displaying properly on different devices

My attempt at creating a website for fun and testing purposes is facing issues when viewed on mobile devices. The images and specially positioned elements are not displaying correctly, extending beyond the page boundaries. I have tried adding the viewport ...

What could be the reason behind my table appearing all crammed up in a single

My table is appearing in a single cell, and I can't figure out what's wrong. Can someone please take a look and let me know where I messed up? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" cont ...

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

Trouble with HR functionality in Outlook email

<table> <tr> <td class="h1" colspan="12" style="font-family: 'proxima_nova_rgbold', Arial, Helvetica, sans-serif;font-size: 18px;text-align:center; padding-top:10px;padding-left:30px;text-transform: uppercase;padding-bottom: 8 ...

Encase the entire section following cloning with JQuery

Make sure to check out the jsfiddle demo linked below before proceeding: JSFIDDLE I need to transform the original structure as shown below: <div class="out"> <a>im here</a> <a>to save</a> <a>our</a> ...

CSS animation is activated solely upon its initial creation

Exploring the world of Vuejs for the first time with my debut project. The core of my project lies in the main component where I have an array as a data variable. Here's an example snippet: export default { name: 'example-component', ...

Can you tell me the name of the unique animated style featured on the new iMac Pro page?

Is it possible to replicate the animation seen on the Apple iMac Pro page using only HTML5 and CSS3? What is this particular type of animation called? Visit the Apple iMac Pro page for reference. ...

The font family specified in the Materia UI theme is experiencing compatibility issues on browsers that are not Chrome

Having difficulty overriding some elements with a specific font, as it seems to work perfectly on Chrome but not on other browsers like Safari and FireFox. Could there be something overlooked? Below is the code snippet: const customTheme = createMuiTheme( ...

How to eliminate margins in Django's easy_pdf module

For generating PDF from HTML, I utilize easy_pdf in conjunction with xhtml2pdf. Below is a brief example: In view.py from easy_pdf.rendering import render_to_pdf_response context = dict({'user_company': 'test'}) template_name = "pdf ...

Alignment of inner div within the footer

I'm struggling to align my footer navigation inline with my footer title. Check out this code snippet to see what I've tried so far: https://jsfiddle.net/nkzsufov/ I experimented with using absolute and relative positioning: .footerNav { margi ...

What is the best way to vertically center an amp-img element?

I'm attempting to vertically center an <amp-img> within a div. <div class="outer" style="height: 100vh"> <amp-img class="inner" layout="responsive"></amp-img> </div> I have tried various methods so far, but none seem ...

Position two div elements and an hr tag to create a step progress bar

Check out my progress bar design https://i.sstatic.net/u9SRM.png How can I center the 'created' and 'assigned' divs below the circle while ensuring the 'hr' line touches the circle, and it is responsive across different scre ...

The CSS @media query is failing to function properly

I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly. Here is the CSS code: /* Screen Adapting */ @media (height ...

Using a percentage width on a <div> element with the "overflow-x: scroll" property does not seem to be functioning properly, even when encapsulated within

My code includes a div within another div, taking up 50% of the page's width: <div id="mainContainer" class="mainContainer"> <div id="scroller" class="scrolling"> <!-- items here should make the div really long --> & ...

Is it practical to extract the page type/name from the CSS of the selected tab?

My website has multiple tabs on a single page and I want to integrate Google Analytics code. However, since all the tabs are part of the same page, I need a way to track which tab the user is interacting with. Would using CSS to check for the selected tab ...