Question

我有不同宽度的图片，需要将它们保持在中心位置他们各自的divs 。

我需要考虑所有边距 - 顶部，底部，左侧，右侧。他们应该在div的中心而不是顶部中心。因此class="row text-centre"和class="center-block"无法提供帮助。

我尝试更改边距但每张图片的宽度不同使其无法实现。我想知道是否有任何方法可以保持任何宽度在其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>

Answer 1

如果您使用的是bootstrap

class="center-block"

只需将中心块类添加到图像中，即可完成操作＆lt;＆lt;没有工作

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

这个类必须在两个维度中居中。看一下，您必须将此类添加到标记内的图像中：

Answer 2

text-align:center;

将其添加到.img-div

Answer 3

我相信你的答案就在这里：

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 */
}

基本上img-div需要适当的高度来操作。

编辑：基于Srinivas Pai小提琴和早期的StackOverflow提交

Answer 4

这对我来说很好。你不需要任何:: before和img样式。

.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;
}

Answer 5

我已移除margin并添加了text-align:center;

试试这个

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

小提琴：http://jsfiddle.net/4wz688o1/1/

更新了代码

.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%);
}

更新了小提琴：http://jsfiddle.net/4wz688o1/4/

如何将图像保持在div的中心？行文本中心和margin-auto无法正常工作

DEMO

5 个答案:

只需将中心块类添加到图像中，即可完成操作＆lt;＆lt;没有工作