Craig Gallagher Craig Gallagher - 25 days ago 11
CSS Question

Align text center and level on the left of the text HTML

I've made a bullet point list in HTML. I then centered the text and the bullet points. However once I center the text I want the text to be in a straight line on the left so my bullet points aren't staggered. Is there any way I can do this.

enter image description here

My CSS is as fallows
Centering my text

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


Centering my bullet points

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

Answer

Set your ul to display as an inline-block to allow that to be affected by the outer element's text-align property, then give it its own text-align 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>

Comments