CODEWITHSUNDEEP
jquerycsshtmlalignment
Saurabh
Saurabh

Reputation: 1007

aligning contents of div to center

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

Upvotes: 0

Views: 113

Answers (3)

Hashem Qolami
Hashem Qolami

Reputation: 99534

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

Upvotes: 2

Jignesh Kheni
Jignesh Kheni

Reputation: 1312

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;

 }

Upvotes: 1

NoobEditor
NoobEditor

Reputation: 15911

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

Upvotes: 1

Related Questions