[已解决]求助大神，html5，两张img图片如何居中并间隔开

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

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

最佳答案

月排行榜 / 总排行榜

大四萌新孤城

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>

跳转到最佳答案楼层

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>

账号		自动登录	找回密码
密码			立即注册