Help: How can I align my list in the center?

Help: How can I align my list in the center?
0
#1

As you can see, I could get the text in my list to align in the center but the numbers of the list stay to the left. I tried to play around with padding but it still looks off. Can someone suggest a solution?

See the Pen Tribute Page by Shawn Pea (@svpea) on CodePen.

0 Likes
#2

Spent a few minutes messing around with it, this looks better, although not perfect, still needs a bit of work across devices

<div class="container-fluid">
    <h1 class="text-center">Porsche 911.</h1>
    <img class="img-responsive" src="https://images.unsplash.com/photo-1414518876340-9c8737380507?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=361e21c33e455c14488e72c276556c7e">
    <caption>"The Porsche 911 is an example of elegant design and engineering that has created a successful sports car for many years." - Anonymous</caption>
    
  <div class="row">  
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-3"></div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
      <h3 class="">Generations of the Porsche 911:</h3>
      <ul>
        <li> <em>1964-1989</em> Porsche "MK1" 911</li>
        <li> <em>1989-1993</em> Porsche "964" 911</li>
        <li> <em>1993-1998</em> Porsche "993" 911</li>
        <li> <em>1998-2004</em> Porsche "996" 911</li>
        <li> <em>2004-2011</em> Porsche "997" 911</li>
        <li> <em>2011-2017</em> Porsche "991" 911</li>
      </ul>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-3"></div>
</div>
0 Likes
#3

That’s going in a good direction, but might be made a little cleaner with 2 things:

  1. Bootstrap column offset classes (col-lg-offset-4 and so on). Basically, move columns by x columns without messing with dummy divs
  2. Dummy divs after the actual content are not necessary - the column with content won’t stretch if there’s nothing there.
0 Likes
#4

Nice, never knew about offset classes. RTFM springs to mind.

@foresterr Ok my interpretation of the col-lg-offset

<div class="row">  
    <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-offset-3 col-xs-6">
      <h3 class="">Generations of the Porsche 911:</h3>
      <ul>
        <li> <em>1964-1989</em> Porsche "MK1" 911</li>
        <li> <em>1989-1993</em> Porsche "964" 911</li>
        <li> <em>1993-1998</em> Porsche "993" 911</li>
        <li> <em>1998-2004</em> Porsche "996" 911</li>
        <li> <em>2004-2011</em> Porsche "997" 911</li>
        <li> <em>2011-2017</em> Porsche "991" 911</li>
      </ul>
    </div>
  </div>
0 Likes