css 图片在div里居中

最新推荐文章于 2023-01-11 11:33:44 发布

chelen_jak

最新推荐文章于 2023-01-11 11:33:44 发布

阅读量898

点赞数

分类专栏：实用 CSS 基础知识

实用同时被 3 个专栏收录

738 篇文章 4 订阅

订阅专栏

CSS

191 篇文章 0 订阅

订阅专栏

基础知识

160 篇文章 0 订阅

订阅专栏

转自： http://zhidao.baidu.com/question/131571863.html?qbl=relate_question_2

问：

比如500*500的div我想插入一张400*400的图片，希望图片在div的中间。在图片的周围都和div有空隙

答：
元旦快乐啊.....
LZ真有心，在元旦居然问如此复杂的问题。不过LZ问到了，我就说一种我个人用的方法。
水平居中很简单，垂直居中就很困难，网上方法很多，不过都存在这样那样的兼容性问题，要么就要引入一些其他元素。考虑到后期图片自动缩放，外容器浮动等等因素，然后只利用代码，不引入其他元素。于是我在网上思路的基础上，自己写了下面的方法。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片居中</title>

    <style>
        *
        {
            padding: 0px;
            margin: 0px;
        }

        /*好懂吧，宽高定义，文本居中。*/
        .conn
        {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            text-align: center;
        }

        /*这个LZ自己研究研究，我定义了一个高100%的块元素用来对齐img*/
        .imgmid
        {
            display: inline-block;
            *display: inline;             /*解决ie6、ie7、ie8的兼容问题*/
            *zoom: 1;                     /*解决ie6、ie7、ie8的兼容问题*/
            height: 100%;
            width: 1px;
            margin-left: -1px;
            vertical-align: middle;
        }

        /*好懂吧，img元素宽高，然后垂直居中对齐。*/
        .conn img
        {
            width: 400px;
            height: 400px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="conn">
        <img src="boy.jpg">
        <span class="imgmid"></span>
    </div>
</body>
</html>

另一种利用伪类提供了更简洁的实现方法：
详见：http://blog.csdn.net/chelen_jak/article/details/20549953

CSS代码：

<span class="css-class" style="color: rgb(255, 0, 255); "><span class="before">.</span>pic_box</span><span class="paren css-block-open" style="color: rgb(255, 0, 255); ">{</span><span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">width<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">300<span class="after">px</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">height<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">300<span class="after">px</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">background-color<span class="after">:</span></span><span class="css-color-spec" style="color: rgb(0, 0, 255); "><span class="before">#</span>beceeb</span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">font-size<span class="after">:</span></span>0; *<span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">font-size<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">200<span class="after">px</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">text-align<span class="after">:</span></span>center;<span class="paren css-block-close" style="color: rgb(255, 0, 255); ">}</span>
<span class="css-class" style="color: rgb(255, 0, 255); "><span class="before">.</span>pic_box</span> img<span class="paren css-block-open" style="color: rgb(255, 0, 255); ">{</span><span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">vertical-align<span class="after">:</span></span>middle;<span class="paren css-block-close" style="color: rgb(255, 0, 255); ">}</span>
<span class="css-class" style="color: rgb(255, 0, 255); "><span class="before">.</span>pic_box</span><span class="css-pseudo-class" style="color: rgb(119, 119, 119); "><span class="before">:</span>after</span><span class="paren css-block-open" style="color: rgb(255, 0, 255); ">{</span><span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">display<span class="after">:</span></span>inline-block; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">width<span class="after">:</span></span>0; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">height<span class="after">:</span></span><span class="css-length" style="color: rgb(0, 0, 255); ">100<span class="after">%</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">content<span class="after">:</span></span><span class="string" style="color: rgb(34, 136, 34); "><span class="before" style="color: rgb(0, 68, 0); ">"</span>center<span class="after" style="color: rgb(0, 68, 0); ">"</span></span>; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">vertical-align<span class="after">:</span></span>middle; <span class="builtin css-declaration-kw" style="color: rgb(0, 0, 153); ">overflow<span class="after">:</span></span>hidden;<span class="paren css-block-close" style="color: rgb(255, 0, 255); ">}</span>

HTML代码：

<span class="paren xml-tagangle" style="color: rgb(0, 0, 153); "><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255); ">div</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204); ">class</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119); ">=</span><span class="string" style="color: rgb(34, 136, 34); "><span class="before" style="color: rgb(0, 68, 0); ">"</span>pic_box<span class="after" style="color: rgb(0, 68, 0); ">"</span></span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153); ">></span>
    <span class="paren xml-tagangle" style="color: rgb(0, 0, 153); "><</span><span class="keyword xml-tag xml-tag-open" style="color: rgb(0, 0, 255); ">img</span> <span class="builtin xml-attribute" style="color: rgb(34, 34, 204); ">src</span><span class="undefined"></span><span class="operator" style="color: rgb(0, 119, 119); ">=</span><span class="string" style="color: rgb(34, 136, 34); "><span class="before" style="color: rgb(0, 68, 0); ">"</span>http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg<span class="after" style="color: rgb(0, 68, 0); ">"</span></span> <span class="paren xml-tagangle" style="color: rgb(0, 0, 153); ">/></span>
<span class="paren xml-tagangle" style="color: rgb(0, 0, 153); "></</span><span class="keyword xml-tag xml-tag-close" style="color: rgb(0, 0, 255); ">div</span><span class="paren xml-tagangle" style="color: rgb(0, 0, 153); ">></span>