Looking to center the numbers in my ordered list within a border box - any tips on how to achieve this?

I'm attempting to create a numbered order list with a circular border around it. The goal is to have the number of the list item centered within the circular border and the entire circle centered within the paragraph. Currently, both the number and the circle are aligned at the top. I would like the circle to adjust its position based on the size of the paragraph. For instance, if the paragraph spans 3 lines, the circle should appear in the middle of those three lines. If it extends to 5 lines, then the circle should be centered within those 5 lines.

HTML

  <ol>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </li>
    <li>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </li>
    <li>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li> 
  </ol>

CSS

li{
margin-top: 20px;
margin-right: 30%;
font-size: 20px;
}

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}

ol > li {
    position:relative; /* Create a positioning context */
    margin:0 30% 20px 4.5em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
}

ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top: 0px;
    left:-2.5em;
    margin-right:8px;
    padding:4px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
    color:#fff;
    background:blue;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align: center;
}
htmlcss

Answer №1

If you want to center an element using CSS, you can achieve this by adding the following code for the :before pseudo element:

ol > li:before {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

The 'top: 50%' will shift the element halfway from the top based on its own top position.

By using 'transform: translateY(-50%);', the element will be vertically centered by moving it up by half of its height.

You can see a demonstration of vertical and horizontal centering in this example: https://www.w3schools.com/css/tryit.asp?filename=trycss_align_transform

The final styles in the code snippet utilize flexbox to ensure both vertical and horizontal centering of the number within the circle.

For more information on flexbox, visit: https://www.w3schools.com/css/css3_flexbox.asp

To implement this, simply add these new styles while retaining your existing ones, and you should achieve the desired result!

Answer №2

Give this a try.

li{
    margin-top: 20px;
    margin-right: 30%;
    font-size: 20px;
}

ol {
    counter-reset:li; /* Start a new counter */
    margin-left:0; /* No left margin */
    padding-left:0; /* No left padding */
}

ol > li {
    position:relative; /* Create positioning context */
    margin:0 30% 20px 4.5em; /* Set margins for list items */
    padding:4px 8px; /* Add spacing around content */
    list-style:none; /* Disable normal numbering */
    display: inline-flex;
}

ol > li::before {
    content:counter(li); /* Use counter as content */
    counter-increment:li; /* Increment counter by 1 */
    /* Style the number */
    position: absolute;
    height: 100%;
    align-self: center;
    left:-2.5em;
    margin-right:8px;
    padding:4px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color:#fff;
    background:blue;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align: center;
    line-height: 50px;
}
<ol>
    <li>
      Try this out to see how it works
    </li>
    <li>
     Experiment with different content and styles
    </li>
    <li>
      Lorem ipsum dolor sit amet... // Content truncated for brevity
    </li>
    <li>
     More lorem ipsum dolor sit amet... // Content truncated for brevity
    </li> 
  </ol>

Answer №3

To vertically align something in the center, there are multiple methods you can use. One approach is to set the parent element's display property to flex or grid, and then apply properties like place-items: center (grid) or align-items: center (flex) on the child elements.

Learn more about Flexbox here

Explore Grid layout here

Another technique involves giving the parent element a position of relative and positioning the child element with relative or absolute positioning. By moving it 50% from the top and using transform: translateY(-50%), you can achieve perfect vertical centering.

I successfully achieved this goal by changing the ::before pseudo-element to display: grid, adding place-items: center (which acts as a shorthand for align-items: center and justify-items: center), setting top: 50%, and utilizing transform: translateY(-50%) as explained above.

You may also consider using two colons instead of one before pseudo-elements, such as ::before and ::after. This distinction is discussed further here.

Below is the CSS code that implements this vertical alignment:

ol>li::before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    display: grid;
    place-items: center;
    top: 50%;
    transform: translateY(-50%);
    left: -2.5em;
    margin-right: 8px;
    padding: 4px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    background: blue;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}

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

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

My current task involves inserting radio button values into a MySql database using Angular. The form consists of radio buttons with predefined values stored in a json file. Below is an example of how the json file is structured: //data.json [{ "surve ...

javascripthtmljsonangulartypescript

Utilizing Robot Framework to select CSS attributes

The Selenium documentation provides an example of how to use Get Element Attribute: ${id}= Get Element Attribute css:h1 id However, I encountered a problem with this selector: ${VISIBILITY}= Get Element Attribute css:visibility mySidebar I ...

cssseleniumcss-selectorsrobotframework

Displaying vertical content with a horizontal scroll using Bootstrap

I have created a div container and I would like to implement a horizontal scroll bar when there are more than four items (each item consists of a picture with a title). Desired outcome: The issue I am facing is that by using the code below, I end up with ...

csstwitter-bootstrapbootstrap-4

What steps do I need to take to get a website up and running with the index.html

After successfully hosting my website, I encountered an issue where it opens the index of the website (a list of files added via FTP) instead of the Index.html page. Can you advise on how to resolve this? Your assistance is greatly appreciated. ...

htmlftp

Utilizing the Bootstrap grid system for responsiveness is optimized for a first word that is precisely 15 characters

Trying to achieve responsiveness using basic Bootstrap. The layout becomes responsive only when the initial word in a sentence contains more than 15 characters, as illustrated below. https://i.stack.imgur.com/wyErA.png <!-- Headers --> <div clas ...

htmlcss

Working with the visibility of a button using JavaScript

My goal is to toggle the visibility of a button using JavaScript. Initially, on page load, the button should be hidden. function hideButton(){ var x = document.getElementById('myDIV'); x.style.display = 'none'; } The visibilit ...

javascripthtmlajax

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

javascriptcsspopup

Unique styling implementation for element situated underneath Angular 6 router-outlet

I'm currently working on implementing router transitions in my Angular application, and I've encountered an unusual problem. The styling for the router-outlet element is being applied to the element that comes after it in the DOM hierarchy. Here ...

htmlangularsassangular-animations

How do I resolve the jQuery error "unable to find function url.indexOf" when working with Vide?

I had previously asked a question regarding the use of the Vide plugin for playing background videos on my website, which can be found here. However, I am now encountering an error that is puzzling me: https://i.stack.imgur.com/UDFuU.png I am unsure abo ...

javascriptjqueryhtmlvideo

CSS: Including an item in a list causes the <div> to expand upwards on the page instead of stretching downwards

I’m currently facing an issue with my list where, upon reaching a certain number of items (in this case 5), the list starts moving up the page instead of extending downwards as expected. I suspect that this problem is related to my use of CSS grid-templa ...

htmlcssreactjs

Tips on assigning a reference to an element that has not been rendered yet

I've created a login page with a button labeled "Watch the video". When the button is clicked, it hides and reveals a video player. My goal now is to automatically start playing the video once it's displayed without requiring an extra play button ...

htmlcssreactjsmaterial-uirefs

Utilize data attributes for streamlined markup efficiency

I'm facing a challenge with two almost identical animations, the only difference being the positioning of "left vs right". I want to find a way to reuse the same block of code for both .forward and .backward. I have considered using HTML 5 data-attrib ...

jqueryjsonhtmljquery-animate

"Utilizing CSS to Format Academic Publications in the Style of APA Guidelines

Is there a way to automatically format a list of academic papers for an updated page using CSS rules? I want to style published articles similar to the following example: https://i.stack.imgur.com/jO56V.png I don't want to manually enter &nbsp;& ...

htmlcss

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button a ...

javascriptjquerycssgoogle-code-prettify

The rows-per-page menu option in Vuetify suddenly vanishes

I'm currently working on incorporating a v-data-table inside a v-card, you can view the code in this CodePen snippet: https://codepen.io/benwasin97/pen/eYveZGL <v-data-table :headers="headers" :items="items" ...

htmlcssvue.jsvuetify.js

Ways to navigate to a different page using HTML response from an AJAX request

After receiving an HTML document as a response from an AJAX call, I need to create a redirection page using this HTML response. Can anyone provide guidance on how to achieve this? ...

javascripthtmlajaxhttp-redirect

Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...

jqueryhtmlcssanimation

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: I've tried several solutions, the latest of which involves the following CSS... @media print{ @page { size:10 ...

javascripthtmlcsspdfpage-break

Having trouble applying CSS styles to a class using Material UI withStyle? If you're finding that withStyle isn't working as

Check out this code snippet: import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import classNames from 'classnames'; const styles = theme => ({ myGridStyle:{ '&:.my-row-s ...

cssreactjsmaterial-uireact-with-styles

Create an input field with a dynamic and exclusive identifier using the DataTables plugin

I am having trouble creating unique IDs for each input field based on the number of rows Here is the code snippet: $(document).ready(function() { var oTable = $('#jsontable').dataTable(); //Initialize the datatable $.ajax({ url ...

javascriptjqueryhtml