What is the reason behind the line-height adjustment only impacting the top portion of the font?

Currently, I am experimenting with the dot HTML character to create icons in different colors. However, I am encountering an issue with the line-height property. It appears that the line-height setting only affects the placement of the top part of the character. Despite setting line-height to match the standard font size of the text, I am unable to align the dot icon appropriately with regular text.

HTML
<div>
  <b>Legend:</b>
  <span class="dotib">&#8226;</span>
</div>

CSS
.dotib{font-size: 36pt; line-height: 12pt;}

I am wondering if there is a more effective method to get the desired behavior from this dot icon?

For reference, you can view the code in this jsFiddle link: http://jsfiddle.net/TzFff/

htmlcssvertical-alignmenttypography

Answer №1

Transform your styling with this:

.dotib {
    font-size: 36pt; 
    line-height: 12pt;
    vertical-align:middle;
    padding-bottom:5px;
}

http://jsfiddle.net/TzFff/1/

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

Refresh table in php without the need to reload the entire page

Currently, I am retrieving data in a table from the database and have three buttons - update, delete, and an active/inactive button. Each button has its own functionality, but I need to reload the updated data in the table after any event without refreshin ...

phphtmlmysql

Incorporating a recurring image beneath a navigation menu

I'm attempting to recreate a header that has a similar appearance to the following: https://i.stack.imgur.com/uVXs3.png However, I am facing challenges in generating the repeating diamond design beneath the black bar. The diamond pattern resembles t ...

htmlcss

I aim to showcase particular cookies within an input field using jQuery

I am seeking a way to create a responsive page that showcases cookies. My goal is to have the output of a function automatically appear in the input value upon loading the page, instead of requiring a click event. Here is the code snippet I have been worki ...

javascriptjqueryhtmlcookies

Move from right to left on the slide?

Is there a way to toggle a div's visibility between collapsed and expanded, transitioning smoothly from right to left? I've noticed that most examples I come across demonstrate the transition from left to right. ...

jqueryhtmlcssjquery-uiposition

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

Implement a click event listener to the existing button function

How can I ensure that the function below only fires when the element with id #submit is clicked? I added a back button, but after clicking it, the code below executes unexpectedly. I need to add a condition to ensure that the code below only runs when #sub ...

javascriptjqueryhtml

Tips for creating inline links

Data is taken from a table using $number and printed as follows: echo "<div class='pagination'><a href='page_pagination.php?number=". $number ."' > ". $number ." </a></div>"; The output does not display in one ...

phphtmlcss

having difficulties in passing form field information to the following html page with angular js

Hello there, I am currently attempting to pass a field value from one HTML page to another using AngularJS. Below are the code snippets: HTML: <body ng-app="myApp"> <div ng-controller="ExampleOneController"> Name:<input type = "text" ...

htmlangularjsangularjs-scope

Struggling to properly position a checkbox within an Angular Material project

<div class="checkbox-password"> <div> <mat-checkbox class="example-margin">Remember me</mat-checkbox> </div> <div> <a routerLink="/forgotPassword" class="createAccount" ...

cssangularflexboxangular-materialdisplay

The alignment of Bootstrap v4.5 checkbox is limited as it cannot be positioned horizontally or vertically when placed next to an input field

As stated in the title: Bootstrap's checkbox is having trouble aligning Horizontally or Vertically when placed next to an input. Error Displayed: https://i.sstatic.net/hNHpm.png I have experimented with various solutions, but none have provided sat ...

javascripthtmlcsscheckboxbootstrap-4

Could multiple values be stored in the option tag in Laravel after selection?

I have encountered an issue where I am able to display all the attribute drop-down options and obtain the attribute id in the value="{{$play->id}}" after selection, which is then stored in the select with name="attribute_id". This allows me to easily fe ...

phphtmllaravellaravel-5.5

Tips for modifying button styles with CSS

I am facing an issue with a submit button on my form. The button currently has an image, which is unnecessary as the same image is used elsewhere on the page. I believe there might be a parent-child element problem preventing me from making the necessary c ...

htmlcssforms

How to reduce the text input field size in Django Bootstrap for a sleeker design

I have a form with various elements like textfields, radio buttons, and text areas. The textfield size is currently too small and does not look good: https://i.sstatic.net/ghimd.png I'm wondering how I can make the textfields slightly larger and why ...

htmlcssdjangotwitter-bootstrap

Preserve the formatting of the text within the list item

I'm currently working on a website where I have a ul element set up. Each list item contains text, but when I zoom in and out of the page, the text overflows the box. Is there a way to prevent the text from overflowing the list item? HTML <div ...

htmlcsszooming

Whenever I try to make my links responsive, they don't seem to work as intended

This is the HTML snippet <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> ...

htmlcssbootstrap-4

Header that sticks to the top of a container as you scroll through it

Many questions arise regarding sticky elements in the DOM and the various libraries available to handle them, such as jquery.pin, sticky-kit, and more. However, the issue with most of these libraries is that they only function when the entire body is scro ...

jqueryhtmlcsssticky

I am facing an issue with the responsiveness of the mat-card component within a div in

Is it possible to display several small paper cards in a div so that they wrap around the container? ...

htmlcssangularjsangular-material2

Implement a smooth transition effect when changing the image source

I am currently working on enhancing a Squarespace website by adding a new image fade-in/fade-out effect when the mouse hovers over one of three buttons. The challenge I'm facing is that the main static image is embedded as an img element in the HTML r ...

javascripthtmlcss

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Currently, I am in the process of creating a collage using images that are all sized at 174x174 pixels. The images are stored on my server, and while my program can locate them successfully, it requires me to click the "save image" button twice for them to ...

javascripthtml

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Looking for recommendations on how to create an Android web application using HTML, CSS, and JavaScript. Any suggestions? ...

javascriptandroidhtmlcssweb-applications