javascript - 父div宽度100%，图片怎么居中?

Question

现在宽屏设计常见，为了适应不同的显示器，往往给p一个100%的宽度，下面再写，那么问题来了，这样的图片怎样做到在任何窗口宽度时自动居中显示?

<p class="banner">
    <ul>
        <li>
            <img src="/attached/banner/1.jpg">
        </li>
        <li>
            <img src="/attached/banner/2.jpg">
        </li>
        <li>
            <img src="/attached/banner/3.jpg">
        </li>
    </ul>
</p>

3Q!

Answer 1

是垂直并且水平居中把，解决方案需要css + js

简单css的水平垂直居中

还记得当年的固定大小的任意元素垂直居中于父元素吗？

<p id="father">
  <p id="son"></p>
</p>

#father{
    width:100%;
    height:100%;
    position:relative;//父相对
}

#son{
    width:400px;
    height:200px;

    position:absolute;
    top:50%;
    left:50%;

    /*关键:让点回去*/
    margin-left: -200px;
    margin-top: -100px;
}

复杂的但是原理一样

这里如果son的宽高不固定怎么办？不知道这是不是题主要问的。

css的代码需要去掉margin，然后使用js获取。

<p id="father">
  <p id="son"></p>
</p>

#father{
    width:100%;
    height:100%;
    position:relative;//父相对
}

#son{
    width:400px;
    height:200px;

    position:absolute;
    top:50%;
    left:50%;

    /*去掉这里，使用js获取
    margin-left: -200px;
    margin-top: -100px;

    */
}

js代码

$(function(){
var height = $("#son").width();
var height = $("#son").height();

$("#son").attr("margin-top",(-height/2)+"px");
$("#son").attr("margin-left",(-width/2)+"px");
});

特别提醒

如果你的son是一个image，您需要延迟执行上面的代码，因为获取到的图片长宽需要等待图片下载完成后再来计算

代码如下

<p id="father">
  <img id="son" src="http://XXXX.jpg" />
</p>

css代码不变，js代码如下

$(function(){
  $("#son").on("load",function(){

    /*这里的图片获取长宽不再是这个样子的，需要修改*/
    //var height = $("#son").width();
    //var height = $("#son").height();


    /*请自己查找把。*/
    $("#son").attr("margin-top",(-height/2)+"px");
    $("#son").attr("margin-left",(-width/2)+"px");


    })
});

提示

如果是图片。请自行查找如何获取图片的原始大小

Answer 2

方法1， img中设置样式 <img src="xxx" style="display: block; margin: 0px auto; vertical-align: middle;">
方法2， p中设置样式 <p style="text-align:center;">
... 其实有很多种方法

Answer 3

补充一点 不需要给元素设置宽度100% 默认块级元素就是100%的

Answer 4

去看看张鑫旭大神博客，有各种居中。w3cplus上也有各种居中文章。

Answer 5

p 用 text-align:center;
然后img用 margin:0 auto;注意的是后面那个auto，前面那个0自定义

Answer 6

绝对定位left:50%
然后再用margin-left图片宽度的一半

Answer 7

为什么一定是图片，而不是作为背景图片呢，作为背景图片的话，background-position:center;就解决了啊……

如果你是要做很多动画效果的话，那就再议了，或许也可以用背景图片的方式，就是看其他动画的元素怎么去定义位置了。

Answer 8

<p>
    <img src="" />
</p>

CSS

p{
    position:relative;
    width:100%;
}
p img{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    max-width:100%;
}

或许你可以试试这样子写

Answer 9

给p加上text-align:center 不是就可以居中了吗

Answer 10

盒模型 so easy