0

I have a problem in aligning the contents of the div to center

I have tried a lot of thing to center the images but did not work.

I have the following structure

<div class="middleSlideContents">
    <div class='image'>
       <img>
    </div>
    <div class='image'>
       <img>
    </div>
    <div class='image'>
       <img>
    </div>
</div>

Now i just have to align the contents of <div class='middleSlideContents'> to center but i can't figure out what i am doing wrong.

The <div class='image'> are generated dynamically but when it generates it has the following structure.

Rest of the code is here Fiddle Demo

and the middleSlideContents div is a responsive so the heights and widths varry by screen right now it is not in jiddle demo

Any help please, please tell if the structure is wrong or i am doing something wrong

Saurabh
  • 1,007
  • 2
  • 10
  • 24

3 Answers3

2

You could display the div.image elements as inline-block, then use test-align-center for the parent (.middleSlideContents) to align the div(s) elements center horizontally:

.image {
    /* Other styles...  */
    display: inline-block;
}

.middleSlideContents {
    text-align: center;  /* <-- align the inline(-block) elements horizontally */
}

JSFiddle Demo

Update

In order to align the inline-block boxes vertically, you follow this approach:

.image {
    /* Other styles...  */
    display: inline-block;
    vertical-align: middle;
}

.middleSlideContents:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

Working Demo

Community
  • 1
  • 1
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • 1
    And remove the `float: left;` property from the `.image` divs. – dgnin Jan 27 '14 at 09:48
  • In fact, you removed it in your fiddle, without this the example doesn't work. If something is `float: left` then it can't react to the `text-align: center` property of its parent. But, why you say it crashes the layout? – dgnin Jan 27 '14 at 09:57
  • @davidgnin `In fact, you removed it in your fiddle` No I didn't. The second statement is not true too, `float: left` is applied to the parent itself, but `text-align: center` will be applied to the children. – Hashem Qolami Jan 27 '14 at 09:59
  • I think its a misunderstanding. I was refering to the `float: left` in `.image` divs, not in the `.middleSlideContents`. – dgnin Jan 27 '14 at 10:05
  • @davidgnin Oh I see, Sorry I was under this assumption that it is obvious to remove `float` property when using `inline-block` at a same time :) – Hashem Qolami Jan 27 '14 at 10:07
1

remove float and then add 2 lines in your css as below : 

.middleSlideContents
{
    width: 86%;
    height: 100%;
    border-radius: 5px;
    float: left;
    margin-left: 7px;
    text-align:center; /*added */
}

.image
{
    /* height: 80%; */
    /* width: 16.2%; */
    border-radius: 5px;
    display:inline-block; /*added */
    margin-right:5px;
    border:1px solid;
}

working demo

EDIT

To center vertically use table-cell

.middleSlideContents
{
    width: 86%;
    height: 100%;
    border-radius: 5px;
    float: left;
    margin-left: 7px;
    text-align:center;
    display:table; /* make parent div behave as a table */
    table-layout:fixed;
}

.image
{
    border-radius: 5px;
    display:inline-block;
    margin-right:5px;
    display:table-cell; /* make child as a table-cell*/
    vertical-align:middle; /*vertical middle align*/
}

demo here

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
1

here is demo of horizontal center align

  • http://jsfiddle.net/jkkheni/7w8TC/20/

    .middleSlideContents
{
  width: 86%;
  height: 100%;
  border-radius: 5px;
  float: left;
  margin-left: 7px;
  text-align:center;
  display:table; 
 }

  .image
 {
     /* height: 80%; */
     /* width: 16.2%; */
     border-radius: 5px;
     margin-right:5px;
     display:table-cell;
     vertical-align: middle; 

 }
 .image img
 {   
   border:1px solid;
   cursor:pointer;
   width:150px;
   height:150px;

 }
jignesh kheni
  • 1,282
  • 1
  • 9
  • 22