Centered and aligned left - Bootstrap

Question

I'm trying to figure out how to have a list of items centered in the page but aligned left so they're flush. I'm using bootstrap. Example:

I'd like the text in the center of the page - aligned left

 <ul class='text-center'> <li class='text-left'> Short Item #1 </li> <li class='text-left'> Much Longer Item #2 </li> <li class='text-left'> Short Item #3 </li> <li class='text-left'> Much Much Longer Item #3 </li> </ul> 

Answer 1

Edited so that it resembles OP's picture:

 body { height: 100%; width: 100%; margin: 0; } .container { position: relative; height: 200px; } .flex-container { height: 100%; width: 100%; position: absolute; display: flex; flex-direction: row; justify-content: center; align-items: center; } .text-center { background: pink; } 

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, harum maiores. Ullam illo consequuntur eum ipsum fugiat, quidem pariatur quibusdam facilis dolores omnis voluptas similique quos commodi incidunt nesciunt error!</p> <div class="container"> <div class="flex-container"> <ul class='text-center'> <li class='text-left'> Short Item #1 </li> <li class='text-left'> Much Longer Item #2 </li> <li class='text-left'> Short Item #3 </li> <li class='text-left'> Much Much Longer Item #3 </li> </ul> </div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea minus sequi placeat eaque at nobis numquam reiciendis explicabo veniam illum consectetur, quis illo consequatur consequuntur! Excepturi nulla molestiae temporibus.</p> 

Answer 2

The following solution is specific to Bootstrap 4, but allows you to center an element respective of content-determined width:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div class="container-fluid"> <div class="row bg-light"> <div class="col-auto mx-auto"> <ul class="bg-secondary text-light"> <li>Short Item #1</li> <li>Much Longer Item #2 </li> <li>Short Item #3</li> <li>Much Much Longer Item #3</li> </ul> </div> </div> </div> 

The .col-auto class also accepts breakpoints, so you could enhance responsiveness by forcing different column behaviors at different breakpoints. The mx-auto class forces the left and right margins to be even, resulting in centering the column on your screen.