1

Possible Duplicate:
How do you easily horizontally center a <div> using CSS?

http://jsfiddle.net/rehan008/s5eEf/ Please refer this.

I want to make all the shortcuts center aligned but the last row should be aligned to the left. Please share if any ideas.

Community
  • 1
  • 1
Rohit Rehan
  • 568
  • 1
  • 4
  • 18
  • You should post your code here. – Pavlo Sep 27 '12 at 11:14
  • What do you mean by "Center aligned"? The DIV withing the container? or the text within the shortcut? – jalynn2 Sep 27 '12 at 11:15
  • I think the closest thing is adding `text-align:justify` to `.shortcutContainer {}`. This will even the the full rows and move the last row items to the left. – complex857 Sep 27 '12 at 11:16
  • Any reason you have to use a single cell `table` to wrap contents? – Passerby Sep 27 '12 at 11:16
  • I can't tell exactly what you want, but this might help: http://stackoverflow.com/questions/10548417/how-to-distribute-floated-elements-evenly-with-a-dynamic-column-and-row-count-in/10550660#10550660. – thirtydot Sep 27 '12 at 11:40

3 Answers3

1

Set all div children of .shortcut to have a centered margin excluding the last one.

.shortcut > div {
    margin: 0 auto;
}

.shortcut:last-child > div {
    margin: 0;
}

Update fiddle

Paul Aldred-Bann
  • 5,840
  • 4
  • 36
  • 55
0

Add this style in your CSS and check. I hope it will work for you

td { text-align:center; }

Ghost Answer
  • 1,458
  • 1
  • 17
  • 41
0

To make each div centre aligned (and on a row by itself), which is how I'm interpreting your requirements, you can change the .shortcut css style to this:

.shortcut{
    border: 1px solid red;
    height:65px;
    width:45px;
    display:block;
    margin:5px auto;
}

To make the last shortcut left aligned, simply give it another style:

   .lastShortcut{
        border: 1px solid red;
        height:65px;
        width:45px;
        display:block;
        margin:5px 0px;
    }
paulH
  • 1,102
  • 16
  • 43
  • if you see there is no seperate row for last row of shortcuts – Rohit Rehan Sep 27 '12 at 11:28
  • So put in another div to wrap the elements that you want as your last row. Or add an ID or a second classname to the last div. Or use the selector that Terric suggested [.shortcut:last-child > div]. Any of those solutions will allow you to specify a different style for the last shortcut. – paulH Sep 27 '12 at 15:41
  • you are not understanding what i mean to say. – Rohit Rehan Sep 28 '12 at 12:28
  • all elements are in same div and floating to the left according to space available the elements will arrange them – Rohit Rehan Sep 28 '12 at 12:29