Images at Center

[farhana]

I want the images to be at center of the table. please help me in Coding and thanks

http://www.sandrashashou.com/galleries/broken

[dsonesuk]

Try

#bwg_standart_thumbnails_228 > a {
    width: 100%;
}

[farhana]

Thank you very much but that changes to One Column only. I want to keep it in two columns.

[dsonesuk]

All i see is images fitting 1 column only.

[farhana]

I want in two columns

[dsonesuk]

Then you first need to set up media queries to adjust size of image or image parent container so you have 2 columns. Once that is set up to can look into centring them.

[dsonesuk]

If this is supposed to be a masonry layout, created using JavaScript, it needs to be adjusted.

 

This will give you responsive 2 column vertically aligned middle row of images.

.raxGallery.grid-item {
    position: static !important;
vertical-align: middle;
}

.bwg_standart_thumbnails_228.gridData {
    width: 100% !important;
height: auto !important;
}

/* REMOVE THIS
#bwg_standart_thumbnails_228 > a {
    width: 100%;
}  */

.bwg_standart_thumb_img_228 {width: 100% !important;  }

[farhana]

Awesome. Much Thanks!

[farhana]

How we can reduce the right and left spaces around the images in columnhttp://www.sandrashashou.com/galleries/broken

[dsonesuk]

They are centring themselves to available responsive coloumn width.

[farhana]

I want that borders width should be small as screenshot attached and thankshttp://www.sandrashashou.com/Capture.JPG

[dsonesuk]

Then make all images the same width, problem solved. Like I said it centres to column width which is 50% of main content area, or make all images expand 100% width whatever fixed size.

[dsonesuk]

This will cause each image width to fill column block available width ,

.grid-item span {
    width: 100%;
}

the column block whose height matches the highest of the two images, the space above and below the narrow portrait image height, cannot unless you totally redesign layout, be narrowed, its vertically align to middle to again highest image height. Align these to top, larger space below, align to bottom, larger space above.

[farhana]

 

If this is supposed to be a masonry layout, created using JavaScript, it needs to be adjusted.

 

This will give you responsive 2 column vertically aligned middle row of images.

.raxGallery.grid-item {
    position: static !important;
vertical-align: middle;
}

.bwg_standart_thumbnails_228.gridData {
    width: 100% !important;
height: auto !important;
}

/* REMOVE THIS
#bwg_standart_thumbnails_228 > a {
    width: 100%;
}  */

.bwg_standart_thumb_img_228 {width: 100% !important;  }

Is there a way that images should be in sequence without vertical alignment in middle?

[farhana]

I want that images should be not be aligned in middle like now. These should be arranged like this

http://www.sandrashashou.com/Capture.JPG

Please guide and thanks

[dsonesuk]

The positioning is controlled by JavaScript, each image parent is given a left and top property, as I said in the first line "IF masonry layout, the js code needs adjusting", if you want back as original remove the

 

.raxGallery.grid-item {
position: static !important;
}

 

but i assure you the two image rows will not be in middle, but slightly to the left.