Ensure that the smaller bullet points are perfectly in line with the larger text vertically

Question

Ensure that the smaller bullet points are perfectly in line with the larger text vertically

I recently adjusted the font size of the bullets in my list by wrapping the li text in a span element and setting a smaller font size for the li. However, this caused an issue with the vertical alignment of the bullets in relation to the text. Can anyone suggest a solution to fix this problem?

Here is the link to the jsFiddle example: http://jsfiddle.net/tXzcA/

li {
  font-size: 15px;
}

li span {
  font-size: 25px;
}

<ul>
  <li><span>text1</span></li>
  <li><span>text2</span></li>
  <li><span>text3</span></li>
  <li><span>text4</span></li>
</ul>

html css list vertical-alignment

Answer 1

Answer №1

Create your own customized bullet points by adjusting the font size as you see fit.

li{
  font-size: 15px;
  list-style-type:none;

}
li span{
  font-size: 25px;
}

ul li:before {
   content: "•";
   font-size: 80%;
   padding-right: 10px;
}

Simply modify the font-size to your preferred size.

Access the jsFiddle link here

Answer 2

Create your own customized bullet points by adjusting the font size as you see fit.

li{
  font-size: 15px;
  list-style-type:none;

}
li span{
  font-size: 25px;
}

ul li:before {
   content: "•";
   font-size: 80%;
   padding-right: 10px;
}

Simply modify the font-size to your preferred size.

Access the jsFiddle link here

Answer 3

Answer №2

Give this a shot:

li span{
  font-size: 25px;
  vertical-align:middle;
  padding-bottom:5px;
}

Check it out here: http://jsfiddle.net/tXzcA/19/

Answer 4

Give this a shot:

li span{
  font-size: 25px;
  vertical-align:middle;
  padding-bottom:5px;
}

Check it out here: http://jsfiddle.net/tXzcA/19/

Answer 5

Answer №3

This code snippet centers both the bullet and the content.

Check it out on Jsfiddle: http://jsfiddle.net/VR2hP/14/

CSS:

ul {
  padding-left: 5em;
  list-style: none;
}

li.twitter::before,
li.fb::before {    
  font-family: 'FontAwesome';
  margin: 0 .2em 0 -1.5em;
  font-size: 3em;
  vertical-align: middle;
}

li.twitter::before {
  content: '\f081';
}

li.fb::before {
    content: '\f082';
}

li {
  list-style-type: none;
}

li span {
  display: inline-block;
  vertical-align: middle;
}

Answer 6

This code snippet centers both the bullet and the content.

Check it out on Jsfiddle: http://jsfiddle.net/VR2hP/14/

CSS:

ul {
  padding-left: 5em;
  list-style: none;
}

li.twitter::before,
li.fb::before {    
  font-family: 'FontAwesome';
  margin: 0 .2em 0 -1.5em;
  font-size: 3em;
  vertical-align: middle;
}

li.twitter::before {
  content: '\f081';
}

li.fb::before {
    content: '\f082';
}

li {
  list-style-type: none;
}

li span {
  display: inline-block;
  vertical-align: middle;
}

Answer 7

Answer №4

Implement an unordered list and format the list items as tables.

For a demonstration, refer to this example: https://jsfiddle.net/luenib/jw1ua38v/

The icon, number, or any desired element can be placed within a span element. The content inside the span is centered both horizontally and vertically, which can be particularly helpful if you prefer not to position the icon at the top. Additionally, the text within the paragraph will maintain space on its left side to prevent overlapping with the icon if the text spans multiple lines.

CSS:

ul {
  padding-left: 0;
}

li {
  display: table;
}

li span {
  width: 40px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

HTML:

<ul>
  <li><span>1</span>
    <p>Example text here. Example text here. Example text here.</p>
  </li>
  <li><span>2</span>
    <p>Another example text here. Another example text here.</p>
  </li>
</ul>

Answer 8

Implement an unordered list and format the list items as tables.

For a demonstration, refer to this example: https://jsfiddle.net/luenib/jw1ua38v/

The icon, number, or any desired element can be placed within a span element. The content inside the span is centered both horizontally and vertically, which can be particularly helpful if you prefer not to position the icon at the top. Additionally, the text within the paragraph will maintain space on its left side to prevent overlapping with the icon if the text spans multiple lines.

CSS:

ul {
  padding-left: 0;
}

li {
  display: table;
}

li span {
  width: 40px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

HTML:

<ul>
  <li><span>1</span>
    <p>Example text here. Example text here. Example text here.</p>
  </li>
  <li><span>2</span>
    <p>Another example text here. Another example text here.</p>
  </li>
</ul>

Ensure that the smaller bullet points are perfectly in line with the larger text vertically

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Scrolling up with CSS3 news headlines auto feature

Is there a way to tally the checked mat-radio-buttons in Angular?

Here's a unique rewritten version: "Achieving a looping carousel with autoplay in Angular 2+ using with

Issues persist with jQuery ajax request attempting to retrieve data from database

Unpredictable selection of elements displayed as links

What is the counterpart of `width: max(100%, fit-content)`?

Is there a way to connect the YouTube iframe in order to display a pop-up message?

I've been working on a script in JavaScript to retrieve lectures for a specific day, but I'm having trouble connecting my jQuery code to it

Creating an Unordered List in GWT that Includes List Items

Position the Material UI Box element to the bottom of its parent container

Modify the cost directly on the search results page using PHP

Using jQuery to dynamically update the CSS of one table column depending on the attribute of another column

What is the best way to increase the top padding of an anchor link?

Struggling to align elements in React/JS/M?

CSS border alignment techniques

How can you verify a phone number input?

Issues with rendering images in the browser due to CSS inline-block layout are causing

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

As a newcomer to Javascript, I am currently working on developing a CRUD-based application and could use some assistance with implementing the Edit functionality