CODEWITHSUNDEEP
htmlcss
Stan
Stan

Reputation: 411

CSS text-align center not working

I have the following html :

    <div class="pagination">
       <ul id="paginationnbEnreg">
          <li class="active">
             <a onclick="changePageMP3('1');" title="Page 1" href="#">1</a>
          </li>
       </ul>
       <span id="nbEnreg" class="label">55 found</span>
    </div>

With the following css :

.pagination {
     margin: auto;
     text-align: center;
     outline: medium none;
     padding: 0;
     position: relative;
     color: #000000;
     font-family: Arial,Helvetica,sans-serif;
     font-size: 12px;
     line-height: 18px;
 }

.label {
    color: #ffffff;
    display: inline-block;
    font-size: 11.844px;
    font-weight: bold;
    line-height: 14px;
    padding: 2px 4px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    vertical-align: baseline;
    white-space: nowrap;
}

My list will diplay on the left of the page while "55 found" will diplay in the center of the page.

I am trying to get my list in the middle of the page but can't get it working.

Upvotes: 0

Views: 938

Answers (3)

Paulie_D
Paulie_D

Reputation: 115045

Your ul is 100% wide as it is a block level element.

You can center it (with the span) by setting display:inline-block on the ul

.pagination {
  margin: auto;
  text-align: center;
  outline: medium none;
  padding: 0;
  position: relative;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
  background: plum;
}
.pagination ul {
  display: inline-block;
}
.label {
  color: #ffffff;
  display: inline-block;
  font-size: 11.844px;
  font-weight: bold;
  line-height: 14px;
  padding: 2px 4px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  vertical-align: baseline;
  white-space: nowrap;
}
<div class="pagination">
  <ul id="paginationnbEnreg">
    <li class="active">
      <a onclick="changePageMP3('1');" title="Page 1" href="#">1</a>
    </li>
  </ul>
  <span id="nbEnreg" class="label">55 found</span>
</div>

Upvotes: 0

Vig
Vig

Reputation: 339

I think this is happening because you didn't remove the list-style and didn't reset the margin and padding.

Do you mean like this http://jsfiddle.net/06u4bsqn/ ?

Upvotes: 2

Hugo G
Hugo G

Reputation: 16496

For margin:auto your box needs a width setting. Otherwise it takes 100%.

Upvotes: 0

Related Questions