0

I have images with different widths that need to keep them at the centre of their respective divs.

I need to consider all margins- top, bottom, left, right. They should be at the centre of the divs not top-centre. Therefore class="row text-centre" and class="center-block" wont help.

I tried to change the margins but having different width per image made it impossible. I am wondering if there is any way to keep any image with any width at the centre of its div.

DEMO

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


<style>
.col-md-3.img-container {
    background-color: green;
    height: 400px;
    display: flex;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
    margin-right: 2%;
}

.img-div {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    //position: relative;
    margin-left:20%;
    margin-right:20%;
//  margin:auto;

}
</style>
</head>


<body>


    <div id="wrapper">

        <div class="container-fluid">

            <div class="row">

                <div class="col-md-3 img-container">
                    <div class="img-div">
                        <a
                            href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiWGXo4U6CCvNItlDYFgEQz4d3T-YjLj13nqUZ-crpAr3qMPx-"
                            title="" data-gallery rel="nofollow"> <img
                            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiWGXo4U6CCvNItlDYFgEQz4d3T-YjLj13nqUZ-crpAr3qMPx-"
                            width="20%" class="img-thumbnail img-responsive img-adv" />
                        </a>
                    </div>
                </div>

                <div class="col-md-3 img-container">
                    <div class="img-div">
                        <a
                            href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSqUIWjfSNC02M5Yjo-7nLBoeSJSEcOZCy0uRdF7Z8HgZRxGWB_Lg"
                            title="" data-gallery rel="nofollow"> <img
                            src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSqUIWjfSNC02M5Yjo-7nLBoeSJSEcOZCy0uRdF7Z8HgZRxGWB_Lg"
                            width="40%" class="img-thumbnail img-responsive img-adv" />
                        </a>
                    </div>
                </div>

                <div class="col-md-3 img-container">
                    <div class="img-div">
                        <a
                            href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTP96P2l57b9znJ60v1gYS695LfH9K0bt8lB38Yi0McCdtq_dtC"
                            title="" data-gallery rel="nofollow"> <img
                            src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTP96P2l57b9znJ60v1gYS695LfH9K0bt8lB38Yi0McCdtq_dtC"
                            width="80%" class="img-thumbnail img-responsive img-adv" />
                        </a>
                    </div>
                </div>

                <div class="col-md-3 img-container">
                    <div class="img-div">
                        <a
                            href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQYUsrUfG7vmoT61NjkXL1o-Xk-I032GQI1wuZ_QIcen399srHimA"
                            title="" data-gallery rel="nofollow"> <img
                            src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQYUsrUfG7vmoT61NjkXL1o-Xk-I032GQI1wuZ_QIcen399srHimA"
                            width="90%" class="img-thumbnail img-responsive img-adv" />
                        </a>
                    </div>
                </div>

            </div>
        </div>

    </div>




</body>


</html>
Daniel Newtown
  • 2,873
  • 8
  • 30
  • 64
Jack
  • 6,430
  • 27
  • 80
  • 151
  • Duplicate of http://stackoverflow.com/questions/10989238/center-align-image-within-div-horizontally and many many others? Including [this one](http://stackoverflow.com/questions/10879955/how-to-align-an-image-dead-center-with-bootstrap) – vogomatix Jul 31 '15 at 12:16
  • 1
    @vogomatix the titles are the same but the required answers are not. – Jack Jul 31 '15 at 12:22
  • yes they are: add class="center-block" – vogomatix Jul 31 '15 at 12:23
  • @vogomatix add center-block to which part? I used row text-centre but did not work. – Jack Jul 31 '15 at 12:27
  • to the img element. Also why are you putting "width=20|40|80|90%" in the img elements? – vogomatix Jul 31 '15 at 12:28
  • 1
    @vogomatix that set the images at the top centre of their divs. They need to be at the centre. I need to consider margin-top and margin-bottom as well. – Jack Jul 31 '15 at 12:31
  • 1
    @vogomatix because each should have its own specific width. I have to show them in different sizes. – Jack Jul 31 '15 at 12:33

5 Answers5

0

If you are using bootstrap

class="center-block"

Just add center-block class to the image , that will do the trick << didnt work

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

With this class MUST be centered in both dimensions. Take a look, you must add this class to the image within the a tag :

enter image description here

Carlos Delgado
  • 2,930
  • 4
  • 23
  • 49
0
text-align:center;

add this to .img-div

Shrinivas Pai
  • 7,491
  • 4
  • 29
  • 56
Dhruvit Rajpura
  • 72
  • 5
0

I believe your answer is here:

http://jsfiddle.net/4wz688o1/5/

.img-div:before {    /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle;  /* vertical alignment of the inline element */
height: 100%;
}


.img-div {
height: 400px;
-webkit-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
position: relative;
text-align:center;
}

.img-div img {
vertical-align: middle;  /* vertical alignment of the inline element */
}

Essentially the img-div needs a proper height to operate on.

Edit: based on Srinivas Pai fiddle and an earlier StackOverflow submission enter image description here

vogomatix
  • 4,856
  • 2
  • 23
  • 46
  • Thanks, they look great in the fiddle but are not aligned in the browser. – Jack Jul 31 '15 at 12:47
  • I tried on Firefox and Safari. – Jack Jul 31 '15 at 12:56
  • They're aligned in Firefox and Chrome - I don't know what those width statements are doing but they are blowing the bottom two images up beyond the 400px height of the div and should go. Remove them and use CSS styling instead. – vogomatix Jul 31 '15 at 12:59
  • The reason that I have them is that I need need each image has a specific width because I do not want to show them in their actual sizes nor in the same size. I reckon the reason that it did not work for me is that I did not remove the width of images. What should I do, if I want to keep images at the centre of their divs and show them with different widths. – Jack Aug 01 '15 at 00:25
0

This works fine for me. You don't need any ::before and img styles.

.img-container{
   position: relative;
   /* set some width and height, I test with width: auto, 100%, 800px and fixed height */
   display: table;
}

.img-container .img-div{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}
frsv
  • 55
  • 1
  • 10
-1

I have removed margin and added text-align:center;

Try this

.img-div {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    position: relative;
    text-align:center; // added this
}

Fiddle: http://jsfiddle.net/4wz688o1/1/

Updated code

.img-div {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    position: relative;

}

.img-div img
{
     position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

Updated fiddle:http://jsfiddle.net/4wz688o1/4/

Shrinivas Pai
  • 7,491
  • 4
  • 29
  • 56