请教图片在div中间的排列

本帖最后由 colin1215 于 2010-11-13 09:45:23 编辑

解决方案 »

  1.   

    大div 内放一个div 设置宽度后 margin:0px auto;
    这样内部的div 就自动居中了，把你的图片放这个div 就可以了
      

  2.   

    恩，这个我知道，但是内部div中的几张图片怎么样等距居中呢？
      

  3.   

    内部div中的几张图片怎么样等距居中这个div 设置无边框，宽度== 图片所占宽度* 图片个数 不就可以了吗？外观是看不到这个内部div 的！所以视觉上就是图片 相当于外面div 水平居中了撒
      

  4.   

    试试设置图片的margin值来解决！
      

  5.   

    为什么不试试在div中设置 text-align:center ?<div style="text-align:center">
        <img />
        <img />
    </div>当然图片上不能用 float
      

  6.   

    或者你在把那几个图片嵌套一层DIV
      

  7.   

    恩，用text-align:center 可以解决，但是删除float之后，margin和padding就不能用了。   
      

  8.   

    text-align:center可以水平居中，但是如果几张图片高度不等就不好看了，怎么在那个层中添加垂直居中
      

  9.   

    在div中使图片水平垂直居中的方法：（兼容多种浏览器）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title><style type="text/css">#picbox{width:400px; height:300px; text-align:center; line-height:300px; border:1px #000 solid;}
    #picbox span{
    display:inline-block;
    }
    #picbox img{vertical-align:middle;}</style>
    </head>
    <body><div id="picbox">
      <span>&nbsp;</span><img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />
      <img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />
      <img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" />
    </div>
    </body>
    </html>
      

  10.   

    图片在div中分散对齐（等间距）：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">.justify{
    width:400px;
    border:solid 2px red;
    background:#FFFFCC;
    padding:10px;

    text-align:justify;
    text-justify :distribute-all-lines;
    }</style>
    </head>
    <body>
    <div class="justify">
    <img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" /> 
    <img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" /> 
    <img src="http://imgsrc.baidu.com/forum/pic/item/3cb753af54ac0fc7faed50f1.jpg" /> 
    </div>
    </body>
    </html>
      

  11.   


    IE有效，FF没有效果，我再看看代码
      

  12.   

    我用下面的代码试了下，就一个图片，怎么垂直的没效果啊，请指点下，谢谢
    <style type="text/css">
    <!--
    #Layer1 {
    position:absolute;
    left:282px;
    top:8px;
    width:559px;
    height:290px;
    z-index:1;
    text-align:center;
    }
    #Layer1 img{vertical-align:middle;}
    -->
    </style>
    </head><body>
    <div id="Layer1"><img src="s2T-java/11-11/Javascirpt/chapter7/上机部分/上机答案/阶段一/images/login.gif" width="89" height="30" /></div>
    </body>
    </html>
      

  13.   


    <style type="text/css">
    <!--
    #Layer1 {
    text-align:center;
    }
    #Layer1 img{vertical-align:middle;}
    -->
    </style>
    </head><body>
    <div id="Layer1"><img src="s2T-java/11-11/Javascirpt/chapter7/上机部分/上机答案/阶段一/images/login.gif" width="89" height="30" /></div>
    </body>
    </html>就可以了