Tips for aligning an icon vertically within a span tag

I have a span similar to this:

<span class="indicator"></span>

Sometimes this span contains numbers like:

<span class="indicator">
    <span>10</span>
</span>

Other times it may display Kendo-UI icons, such as:

<span class="indicator">
    <span class="k-font-icon k-i-checkmark"></span>
</span>

Below is the CSS associated with these elements:

span.indicator {
    position: relative;
    border: 1px solid #8a8a8a;
    background: #8a8a8a;
    color: #ffffff;
    font-size: 0.85em;
    font-family: helvetica;
    padding: 2px;
    margin: 2px;
    width: 30px;
    overflow: visible;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
}

.k-font-icon {
    font-family: KendoUIGlyphs;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    font-size: 1.3em;
    line-height: 1;
    opacity: 1;
    text-indent: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: none;
    font-size: 16px;
}

There are two issues that need addressing:

  1. I want the height of both span indicators to be consistent. Currently, the one with an icon is slightly taller than the other.
  2. The icon within the span with an icon is not vertically centered.

UPDATE:

Adjusting the font-size of .k-font-icon to 1em resolves both problems, but makes the icon appear too small.

UPDATE 2:

For a demonstration, refer to the Kendo UI Dojo.

htmlcsskendo-ui

Answer №1

.k-font-icon {
    alignment: middle;
}

This is the easiest method, I hope it is useful.

Answer №2

When adjusting the dimensions of your .indicator, there are multiple methods you can use. One of the simplest ways is to switch the display to flex instead of inline-box, and include a few additional properties:

.indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #8a8a8a;
    background: #8a8a8a;
    color: #ffffff;
    font-size: .85em;
    font-weight: 400;
    font-family: helvetica;
    padding: 2px;
    margin: 2px;
    width: 30px;
    height: 20px;
    border-radius: 4px;
}

On a separate note: unless your .indicator class functions differently based on the HTML element it is applied to (in which case, restructuring may be in order), avoid adding a span at the start of your CSS rule. This unnecessarily increases specificity and hinders the flexibility and future-proofing of your CSS.

Answer №3

Utilize the line-height and vertical-align properties in CSS:

  span.indicator {
      position: relative;
      border: 1px solid #8a8a8a;
      background: #8a8a8a;
      color: #ffffff;
      font-size: .85em;
      font-weight: 400;
      font-family: helvetica;
      padding: 2px;
      margin: 2px;
      width: 30px;
      height: 20px;
      line-height: 20px;
      vertical-align: middle;
      overflow: visible;
      text-decoration: none;
      text-align: center;
      display: inline-block;
      border-radius: 4px;
  }
  span.indicator .k-font-icon {
    line-height: 20px !important;
  }

SEE DEMO

Answer №4

Currently updated

How about this?

div.status {
   background: #8a8a8a;
   color: #ffffff;
   font-size: 1.35em;
   font-family: helvetica;
   padding: 2px;
   margin: 2px;
   width: 30px;
   overflow: visible;
   text-decoration: none;
   text-align: center;
   display: inline-block;
   border-radius: 4px;
}

.k-custom-icon {
    font-family: CustomIcons;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
 }

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

increasing the size of the drop-down menu width

I have been struggling to adjust the width of my dropdown list box on my page. Despite my efforts, I cannot seem to make it bigger. Here is the code snippet causing me trouble: <div class="form-group row"> <div class="col-sm-1&quo ...

cssasp.netbootstrap-4

Ways to identify if a resize event was caused by the soft keyboard in a mobile browser

Many have debated the soft keyboard, but I am still searching for a suitable solution to my issue. I currently have a resize function like: $(window).resize(function() { ///do stuff }); My goal is to execute the 'stuff' in that function on ...

javascriptjqueryhtmlmobilebrowser

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

A scenario I am working on involves a Login jsp that accepts a user email and sends it to a servlet. If the provided email is not found in the database, the servlet redirects back to Login.jsp with an attribute "error". Within the header of Login.jsp, ther ...

javascripthtmljspbrowserscriptlet

Limit access to Google Fusion Table to specific types of maps. Eliminate Google Fusion Table for selected map formats

Currently, I am in the process of creating a web map using the Google Maps Javascript API. My objective is to display a Google Fusion Table containing buildings in Boston exclusively on a stylized map named "Buildings." When I switch to the Buildings map t ...

javascripthtmlgoogle-mapsgoogle-maps-api-3google-fusion-tables

Need help with a countdown function that seems to be stuck in a loop after 12 seconds. Any

I am facing an issue with a PHP page that contains a lot of data and functions, causing it to take around 12 seconds to load whenever I navigate to that specific page. To alert the user about the loading time, I added the following code snippet. However, ...

javascripthtml

Can you please explain the purpose of the white space in the HTML code?

Currently, I am working on developing a mobile application, and as I start adding styles, I notice a mysterious blank space that seems to be appearing out of nowhere. Can anyone provide any insights or suggestions to help me troubleshoot this issue? https ...

htmlcssnext.js

Error arises when uploading csv files to Node.js with Multer due to an unexpected field presence

I'm currently working on implementing a file upload feature with the use of Node.js, Vue, and Multer. Below is the Vue.js front-end code: export default { data(){ return{ selected: "How do you want to input the data?", options: [ ...

javascripthtmlnode.jsvue.jsmulter

Using the power of jQuery to load Ajax content, unfortunately, the content remains

Hey there, I'm currently working with an HTML file that utilizes AJAX to load content from other HTML files on the same server. However, for some reason, it's not functioning properly. I'm new to AJAX and I'm not sure what could be caus ...

phpjavascriptjqueryhtmlajax

Explanation for aligning anchors within an HTML <div>

I'm faced with this HTML snippet: <div class="row"> <div class="col-md-10 social-icons"> <a href="https://www.youtube.com/" target="_blank"><img src="/images/youtube-i.png"></a> <a href="https://gi ...

htmlcss

What could be the reason for the extra tags being returned by YQL?

Currently, I am executing a query in the YQL console with the following data: select * from html where url='http://www.motorni-masla.net/index.php?main_page=product_oil_info&cPath=140&products_id=294&zenid=c8281021bbfed454176247900b3b9d4a ...

htmljsonxpathyql

I aim to break down a function into several functions using jQuery and AJAX for better organization and efficiency

I am working with a JavaScript file that includes an Ajax function to fetch data from a JSON file on a server. The goal is to interpret this data into a table, but I would like to break down the process into separate functions for generating links, dates, ...

javascriptjqueryhtmljsonajax

What is the best way to dynamically update styleUrls or style properties in Angular?

One of my goals is to give users the ability to customize colors and certain styles within my Angular application. I am thinking about creating a structure like this: Structure: component-one   folder-with-css-files     style-for-component-1-fo ...

cssangularstyled-components

Selenium can be used to locate elements between two specific spans

I'm on a mission to locate specific text within this HTML code using Selenium <span class="value"> Receiver 1 <br> </span> Is there a way to make it more straightforward, like perhaps using span[class=value]? ...

cssselenium

Optimizing Your HTML/CSS/JavaScript Project: Key Strategies for Modular

When it comes to web frontend projects (html/css/javascript), they are often perceived as more complex to read and maintain compared to Java/C#/C/C++ projects. Is it possible to outline some optimal strategies for enhancing the readability, modularizatio ...

javascripthtmlcss

What is the proper location to insert CSS within Laravel?

What is the recommended location for storing CSS or JS files in Laravel? More specifically, what are the differences between placing CSS files in /public versus /resources/css? Which directory is preferable for storing my CSS files? ...

javascriptphpcsslaravel

Issues encountered with the functionality of face-api and tensorflow.js within the browser

I've been trying to execute this example in the browser Check out the example here Specifically looking at this code snippet <!DOCTYPE html> <html> ... (Contents of the code snippet) ... </body> </html> Unfortunately, I&apos ...

javascripthtmltensorflow.jsface-api

Looking to spice up your static HTML site? Dive into the world of Ruby on

I recently developed an app that features a static HTML webpage containing text and images, and now I'm interested in incorporating Ruby on Rails to explore its capabilities further. After creating a basic RoR application, I copied the HTML content f ...

javascripthtmlruby-on-railsruby

Styles in print CSS are not effective in an Angular project

Currently, I am working on an Angular project where I need to generate a printable document using CSS. The challenge I am facing is ensuring that the date and title in the header do not print automatically when the document spans multiple pages. Additional ...

cssangularprinting

AngularJS bidirectional binding with numerous select choices

I am faced with a unique challenge - I have a list of non-exclusive fields that users want to see presented in a select box allowing multiple selections, rather than individual checkboxes bound to Boolean values in the model. While I know how to create t ...

angularjshtml

Fixing content at the bottom inside a container with Bootstrap 4

My app is contained within a <div class="container">. Inside this container, I have an editor and some buttons that I always want to be displayed at the bottom of the screen. Here's how it looks: <div class="container> // content here.. ...

htmlcssbootstrap-4