CODEWITHSUNDEEP
htmlcss
Marchese Il Chihuahua
Marchese Il Chihuahua

Reputation: 1129

How to center an unordered block list

I would like to center an unordered block-style list across the 12 columns created in the code below. I am trying to do so using a span with the center style activated but it is not working.

<div class="col-sm-12">

     <span style="center";>
      <ul class="four-step-enrichment-list">
        <li><a>Step-by-step</a></li>
        <li><a>Wastes</a></li>
        <li><a>Controls</a></li>
        <li><a>Risks</a></li>
        <li><a>Documents</a></li>
        <li><a>Reviewed by</a></li>
      </ul></center>
    </span>
</div>

css

.four-step-enrichment-list li a{
    display: block;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

.four-step-enrichment-list li {
    float: left;
}

.four-step-enrichment-list {
    list-style-type: none;
    align-content: center;
}

Upvotes: 0

Views: 160

Answers (3)

zsawaf
zsawaf

Reputation: 2001

I am assuming you want to center the list, and not the elements within the list. You can achieve this with flex as show below:

ul {
  list-style: none; 
  padding: 0;
  margin: 0;
}

.center {
  display: flex;
  justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 center">
    <ul>
      <li>Element sdfad</li>
      <li>Element</li>
      <li>Element sad</li>
      <li>Element ssdfadsghh</li>
      <li>Element sdfad</li>
    </ul>
  </div>
</div>

Upvotes: 1

pol
pol

Reputation: 2701

You need to make the div container display as table, and add auto margin. Also set ul padding to 0.

ul.four-step-enrichment-list li a{ display: block; text-align: center; padding: 16px; text-decoration: none; }
ul.four-step-enrichment-list li {
  float: left;
  display: block;
}
ul.four-step-enrichment-list {
  list-style-type: none;
  padding: 0;
  
}
div.col-sm-12 {
  display: table;
  margin: auto;
}
<div class="col-sm-12">
  <ul class="four-step-enrichment-list">
    <li><a>Step-by-step</a></li>
    <li><a>Wastes</a></li>
    <li><a>Controls</a></li>
    <li><a>Risks</a></li>
    <li><a>Documents</a></li>
    <li><a>Reviewed by</a></li>
  </ul>
</div>

Upvotes: 1

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

I think this is what you are looking for, see fiddle https://jsfiddle.net/4urqnxze/3/

You can remove all this non-sense wrapping the list see html:

<ul class="four-step-enrichment-list">
  <li><a>Step-by-step</a></li>
  <li><a>Wastes</a></li>
  <li><a>Controls</a></li>
  <li><a>Risks</a></li>
  <li><a>Documents</a></li>
  <li><a>Reviewed by</a></li>
</ul>

Then add display: flex and justify-content: space-around;to the list see CSS

.four-step-enrichment-list {
  list-style-type: none;
  align-content: center;
  display: flex;
  justify-content: space-around;
}

Upvotes: 2

Related Questions