CODEWITHSUNDEEP
htmlcss
Twifty
Twifty

Reputation: 3378

centering overflowed content

I have a dynamically created list of <a> tags (without text) to which I apply a background image. I display these icons within <div> container using the float: left; style.

When the row of icons becomes too long it overflows and begins a new row as expected.

How can I either center this last row, or spread the icons out evenly across the row?

Upvotes: 0

Views: 57

Answers (1)

AdityaSaxena
AdityaSaxena

Reputation: 2157

Cool..so for centering the row, this is what you need : http://jsbin.com/uPeYaJE/1/edit

Screencapture:

enter image description here

CSS:

.container{
  width:200px;
  background-color:#666666;
  overflow:auto;
  text-align:center;
}

.container a{
  display:inline-block;
  background: url('http://placekitten.com/34/34'); 
  background-repeat:no-repeat;
  background-size: 100%; 
  width: 34px; 
  height: 34px;
}

HTML:

<div class="container">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>

Upvotes: 1

Related Questions