晓学生 发表于 2019-8-12 21:46:25

求助大神，html5，两张img图片如何居中并间隔开

html5，两张img图片如何居中并间隔开

zltzlt 发表于 2019-8-12 22:10:35

一个小例子：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
      .cont {
            margin: auto;
            padding: 30px 200px 30px 200px;
      }
      .img1 {
            margin-right: 100px;
      }
    </style>
</head>
<body>
<div class="cont" align="center">
    <img src="pic.png" alt="1" class="img1">
    <img src="pic2.png" alt="2">
</div>
</body>
</html>

晓学生 发表于 2019-8-13 08:43:54

是垂直居中，麻烦你了大佬

honeyhhhh 发表于 2019-8-13 10:53:43

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>      .main {            position: absolute;            width: 520px;            height: 250px;            top: 50%;            left: 50%;            margin-left: -260px;             margin-top: -125px;            background: lightseagreen;      }      .main img {            width: 250px;      }    </style></head><body>    <div class="main">      <img src="./1.jpg" alt="">      <img src="./1.jpg" alt="">    </div></body></html>

时空断裂 发表于 2019-8-13 13:30:31

放一个div里,让div居中

大四萌新孤城 发表于 2019-8-13 20:30:15

用flex布局即可

大四萌新孤城 发表于 2019-8-13 20:31:13

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>图片居中</title>
        <style type="text/css">
      .outside{
              height:500px;
            display:flex;
            display:-webkit-flex;
            justify-content: center;
            align-items: center;
      }
      .box1,.box2{
            width:200px;
            height:200px;
            background:#ccc;
            margin:0 20px;
      }
        </style>
</head>
<body>
        <div class="outside">
      <div class="box1">
            <img src="#" alt="图片1">
      </div>
      <div class="box2">
            <img src="#" alt="图片2">
      </div>
        </div>
</body>
</html>
页: [1]
查看完整版本: 求助大神，html5，两张img图片如何居中并间隔开