Set the text to be centered and aligned to the left margin in an HTML document

After creating a bullet-point list in HTML, I centered the text and bullet points. However, when I center the text, the bullet points become staggered. Is there a way to keep the text in a straight line on the left while still centering it?

https://i.sstatic.net/YPrlu.png

My CSS code is below:

.l-section.wpb_row.height_auto.color_alternate {
      text-align:center;
    }

For centering bullet points:

.wpb_text_column p:last-child, .wpb_text_column ul:last-child, .wpb_text_column ol:last-child{
   list-style-position: inside;
}
htmlcss

Answer №1

Make sure your ul is set to display as an inline-block so it can be affected by the outer element's text-align property. Then, give the ul its own text-align property set to left to align the inner list items:

div {
  text-align: center;
}

ul {
  display: inline-block;
  text-align: left;
}
<div>
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Foobar</li>
  </ul>
</div>

Answer №2

Ensure that the bulletin list displayed has the CSS property text-align: left;.

<!DOCTYPE html>
<html>
<head>
  <style>
    li {
       text-align: left;
    }
  </style>
</head>
<body>

<h4>An Unordered List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Answer №3

Opt for flexbox when styling your ul elements and their parent:

        .parent {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-content: flex-start;
        }
        ul{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-content: flex-start;
        }

Answer №4

In my opinion, achieving this layout can be done by utilizing the power of CSS flexbox. Here is a glimpse of the code I would use:

HTML SNIPPET

<h3>Main Title</h3>
<div class="wrapper">
 <ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
 </ul>

CSS SNIPPET

.wrapper {display: flex; align-items: center; justify-content: center;}
h3 {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

Efficient creation of a user-friendly interface application designed to retrieve data from a nearby server

The Challenge I am faced with the task of creating a simple GUI application that can either be run on a local Ubuntu 14 server or locally while still being able to access data from the server for multiple users to make changes to a basic array data file. ...

pythonhtmluser-interfaceserverwysiwyg

What is the method for rotating a map using JavaScript?

My map built with Leaflet displays a route and a moving car marker. Now, I am looking to implement a feature where the map rotates based on the direction of the car. I have access to both the current coordinates of the car and the target coordinates. ...

javascriptjquerycssleaflet

Issues with Jquery Div sliding transitions from right to left are not functioning correctly

Creating page transitions in jQuery similar to "http://support.microsoft.com/." Encountering an issue where after the page transitions are completed, they start from the left instead of the expected right direction. Referencing this fiddle (Working Code) ...

javascriptjqueryhtmlcss

How can we modify the position of a header from fixed to relative when the mobile drop-down menu is opened?

I am experiencing an issue with my responsive design. When viewed on a device that is less than 600px wide, the drop-down multi-level navigation overflows downward and does not scroll because the header has a fixed position. As a result, the tabs in the me ...

javascriptphpjquerycss

Enhancing security in client-server communication using HTML5 Ajax

Thank you for your assistance today. I am currently in the process of developing an HTML5 game and require guidance on the most effective method for Client Server communications. I am exploring alternatives to socket.io for undisclosed reasons. The key p ...

jqueryajaxjsonhtml

The bootstrap code I wrote runs smoothly on Codeply's online compiler, but unfortunately it's not functioning properly in VS code

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="">OurCoolBrand</a> <button class="navbar-toggler" type="button&quo ...

htmlcssbootstrap-4

The multiline feature of tooltip on mat-table cell is malfunctioning

I adjusted the mat-tooltip to be displayed as multiline using the following style in the global CSS: .mat-tooltip-class-here { white-space: pre-line !important; } Interestingly, this formatting works on span and button elements but not on mat cells. ...

cssangulartooltipmat-table

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Is there a way to create a function that continuously changes the background color every 15 seconds by picking colors from an array that starts over once all colors have been used, without having the function run just one time? $(document).ready(() => ...

javascriptjquerycss

The background color appears to be fixed in place even after attempting to switch it to

I've been using a plugin for my camera functionality and I need to set the background color to transparent in order to display it properly. However, when I close the camera preview, the background remains transparent which is causing an issue. Is the ...

htmlcsscordovaionic-frameworkionic2

Capture user input to extract data from a JavaScript object

I need help with implementing a search function where users can enter a name and the person's extension will be displayed on the UI either by clicking a button or pressing "return". Any ideas on how to make this feature work seamlessly? UI <html ...

javascripthtmlobjectsearchuser-input

I'm curious, which effect or plugin is being used here?

Do you know the name of this particular parallax effect or the plugin used for it? I'm also interested in finding more examples with a similar type of effect, so if you have any tutorials on how to achieve it, that would be greatly appreciated. ...

jqueryhtmlcss

Ways to achieve a blurred background effect on the body using CSS

I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...

css

ReactJS aligns buttons to the right

I have been attempting to align a button to the far right without success. Here is what I have tried: <Button variant="contained" style={{display: 'flex', justifyContent: 'right'}} color="primary" className="float-right" onClick={ ...

javascripthtmlcssreactjs

Step-by-step guide on clipping a path from an image and adjusting the brightness of the remaining unclipped area

Struggling to use clip-path to create a QR code scanner effect on an image. I've tried multiple approaches but can't seem to get it right. Here's what I'm aiming for: https://i.stack.imgur.com/UFcLQ.png I want to clip a square shape f ...

javascripthtmlcss

Converting Laravel variable into an image using JavaScript

I have a base64 string that I'm passing from the controller to the view. After verifying that the base64 string is correct online (by converting it to an image), I am attempting to call it in my JavaScript like so: <script> var crosshairImg ...

javascriptphpjqueryhtml

How to Adjust Overlapping Text in CSS?

Currently, I am facing an issue with an element overlapping in my CSS file. On a regular browser, one line of text appears fine but on mobile devices, it overlaps into two lines. This problem is specifically for the mobile version of the website, particula ...

htmlcssmobiletwitter-bootstraptablet

Arrange database by website domain in PHP

I'm facing an issue where I need to extract domain names from a database and build buttons that can be used to sort the database based on these domains. For example, clicking on the Gmail button should sort users with Gmail accounts, and clicking on t ...

phphtmlcss

The html input box's ability to handle overflow situations

Currently, I am working on creating a form that allows users to update data. <dl> <dt>Medical Needs:</dt> <dd class="med_needs" style="height:60px;overflow:auto"> <input type = "text" id="med_needs"name ="med_nee ...

htmlcss

Having trouble with a switch statement in Javascript that is unable to find a case for "none."

In my code, I am checking to see if there is a ball in a specific map point and then changing the color of the pixels where the ball is located to match the color of the ball. Here is my code snippet: function UpdateColorInMapPoints(mapPointIndexs) { / ...

javascripthtmldebuggingswitch-statementoutput

Activate Bootstrap modal using an anchor tag that links to a valid external URL as a fallback option

To ensure accessibility for users who may have javascript disabled, we follow a company standard of developing our web pages accordingly. Our target demographic still includes those familiar with VCRs blinking 12:00. One particular challenge involves a te ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal