Align the text vertically within a list item

<ul style="text-align: center;">
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</div></li>
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code2%]</div></li>
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code3%]</div></li>
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code4%]</div></li>
</ul>

Are there any ways to vertically align text in a list item without resorting to using display: flex; and align-items:center? I prefer inline CSS only.

cssinlinevertical-alignmentlistitem

Answer №1

Give this a shot

Avoid using display: flex; align-items-center. Stick to inline css only.

<ul style="list-style:none">
  <li style="margin: 0; padding-bottom: 23px;">
    <span style="font-size:40px; vertical-align: middle;margin-right:10px">&#8226</span>
    <span style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; vertical-align: middle;">  [%code1%]</span>
  </li>
  <li style="margin: 0; padding-bottom: 23px;">
    <span style="font-size:40px; vertical-align: middle;margin-right:10px">&#8226</span>
    <span style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; vertical-align: middle;">  [%code1%]</span>
  </li>
    <li style="margin: 0; padding-bottom: 23px;">
    <span style="font-size:40px; vertical-align: middle;margin-right:10px">&#8226</span>
    <span style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; vertical-align: middle;">  [%code1%]</span>
  </li>


</ul>

Answer №2

When it comes to incorporating inline CSS, there is an opportunity to streamline your code and leverage the cascade by integrating certain properties into the <ul>.

There are multiple approaches to achieving this, but one method involves adding 

display: table-cell; vertical-align: middle;
to the <div>s...

<ul style="color: black; font-family: 'Arial', sans-serif; font-size: 32px;">
  <li style="margin: 0; padding-bottom: 23px;">
    <div style="font-size: 17px; display: table-cell; vertical-align: middle;">[%code1%]</div>
  </li>
  <li style="margin: 0 0 23px 0;">
    <div style="font-size: 17px; display: table-cell; vertical-align: middle;">[%code2%]</div>
  </li>
  <li style="margin: 0 0 23px 0;">
    <div style="font-size: 17px; display: table-cell; vertical-align: middle;">[%code3%]</div>
  </li>
  <li style="margin: 0 0 23px 0;">
    <div style="font-size: 17px; display: table-cell; vertical-align: middle;">[%code4%]</div>
  </li>
</ul>

Answer №3

Include the following properties in the div:

display: inline;
    line-height: 2;
    vertical-align: bottom;


<ul>
  <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
   <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;display:inline;line-height:2;vertical-align:bottom;">[%code1%]</div>
</li>
  
  
  
</ul>

Answer №4

Here is a suggestion to improve your code:

  <ul>
    <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
     <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; display: inline-block; vertical-align: middle">[%code1%]</div></li>
    <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
     <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; display: inline-block; vertical-align: middle">[%code2%]</div></li>
    <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
     <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; display: inline-block; vertical-align: middle">[%code3%]</div></li>
    <li style="margin: 0; padding-bottom: 23px; font-size: 32px;">
     <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px; display: inline-block; vertical-align: middle">[%code4%]</div></li>
  </ul>

You could try adding a custom bullet style to your list items instead of changing the vertical-align property. Here is a helpful resource on how to customize list styles: CSS List Styles

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

Switching the class from "untoggled" items to the selected item in React

Recently, I developed a toggle component known as Accordion. Within this component, I am iterating through an array of objects and displaying them in the following format: {object.map((o) => ( <Accordion key={o.id} title={o.question} className="i ...

cssreactjsreact-hookstoggleaccordion

Enhance the appearance of your forms with the "Bootstrap

I'm having trouble with the input-group-addon class. My HTML code is dynamically generated using JavaScript and follows the same structure across different pages. However, it works on one page but not on another. I can't seem to figure out why! ...

htmlcsstwitter-bootstrap

Styling with CSS based on the remaining width of the viewport relative to the height

If you're viewing this on a tablet browser, the dimensions are set relative to the viewport width and height. Let's assume a landscape orientation for simplicity. Inside a fullscreen container, there are two divs positioned absolutely, just like ...

htmlcsscss-positionviewport

Tips for Incorporating HTML Code into an ASP Button's Text Attribute

How can I add a symbol to a button's text without it showing as blank? The symbol in question is an arrow, which you can find here. <asp:button id="btnAdd" runat="server" class="next"/> CSS: .next { content = &#10095; width:50px; } ...

htmlcss

JavaScript code for Tree not functioning correctly on Internet Explorer

Seeking assistance to fix a bug in my JavaScript program. The code works perfectly on Google Chrome and Firefox, however it encounters an error in Internet Explorer 8 as indicated below. Any suggestions on how to resolve this issue would be greatly appreci ...

javascriptjqueryhtmlcsslist

Conceal the Standard Select Dropdown Arrow in Internet Explorer 9

VIEW DEMO I attempted to use the CSS property appearance: none; to hide the select dropdown arrow, but it still shows in IE9. Refer to the image for clarification. Does anyone have a solution to hide the arrow using either CSS or jQuery? Below is my cod ...

jqueryhtmlcssinternet-explorer-9

Ways to modify color while user moves the screen

I'm working with some jQuery code that changes the colors of elements as the user scrolls down, and I want it to revert back to the original color when scrolling back up. However, the script is not behaving as expected... Here is the original working ...

javascriptjqueryhtmlcss

What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

Demo available at the bottom of the page Within my code, there is a div called #myDiv that defaults to an opacity of 0. Upon hovering over #myDiv, the opacity changes to 1. See the CSS snippet below: #myDiv { opacity: 0; } #myDiv:hover { opacity: 1 ...

javascripthtmlcss

Exclude the footer from the index.html file by configuring it in the docusaurus.config.js file

From what I understand, the docusuarus.config.js file is responsible for translating specified information into HTML to construct your website. This translated information is then directed to the 'index.html' file. However, I am encountering an ...

javascriptcssreactjsnode.jsdocusaurus

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

jquerycssangulartypescript

How can I make my Grid items in React and Material-UI occupy the entire horizontal space without wrapping to the next row?

I am currently utilizing Material-UI within a React 16.10 project. My goal is to create a table where the left column consists of an icon, while the right column displays a label and address stacked on top of each other. I want the items in the right colum ...

cssreactjsgridmaterial-uiwidth

Adjusting Image Size based on Window Width for Internet Explorer

Based on the provided code snippet <style> .x{ background: url('img.jpg') no-repeat; background-size: contain; height: 100%; } </style> <div class="x"></div> It is functioning correctly in Chrome and Firef ...

javascriptjqueryinternet-explorercss

The identifier is not being used for the HTML element on the mobile browser

Having some issues with CSS priority on my mobile device. The problem is that the CSS id selector push-content is not being applied to the body element. Surprisingly, it works perfectly fine on my PC browser. The code that's not working on mobile dev ...

htmlcssmobileselector

A guide to building a dynamic form slider that showcases variable output fields with Javascript

I'm interested in creating a Slider Form that shows different output fields when sliding, using Javascript. Something like this: https://i.sstatic.net/3Isl4.png Could anyone provide suggestions on how to achieve this or share any links related to so ...

javascripthtmljquerycss

Change the dimensions of a picture from 4:3 to 16:9 while maintaining its responsiveness using CSS

Imagine I have this image with a 4:3 aspect ratio and dimensions of 640x480: https://i.sstatic.net/p4xRM.jpg Here is the code used to display it: <img src="../static/images/image4-3.jpg" class="img-fluid" alt=""> Now ...

htmlcssbootstrap-5

Fixed Positioning Div to Stay at the Top while Scrolling

Currently, I have successfully implemented the functionality to stick the div to the top once it scrolls down by 320px. However, I am curious if there is an alternative approach to achieving this effect. Below is the code snippet I am using: jQuery(functi ...

javascriptjquerycsshtml

The hover effect for changing the style of one element when hovering over another element is not functioning as

I've encountered an issue with styling a triangle element using the .something:hover .another{...} selector. Can anyone help me understand what might be causing this problem? .actions { display: flex; margin-top: 20px; max-width: 260px; } .a ...

css

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

javascriptcssreactjsnext.js

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb

Is there a way to identify when a radio button's value has changed without having to submit the form again?

Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...

javascripthtmlcssradio-buttonforms