时间戳

首页 > 解决方案 > 为什么这个 div 不居中？

html - 为什么这个 div 不居中？

问题描述

https://codepen.io/cavad/pen/wvoOJdL?editors=1100

我讨厌css。

 

*{
    margin:0px;
    padding: 0px;
}
.sekil1{
    position: relative;
    top:40px;
    left: 10px;
    width: 400px;
    height: 400px;
    background-color: grey; 
}
.sekil1 img{
    margin: 5px;
    max-width: calc(100% - 10px);
    height: auto;
    max-height:calc(100% - 10px);
} 
.sekiller img{
    margin:10px 10px;
    width: 100px;
    height:100px;
    float: left;
}
.sekiller{
    position: absolute;
    top: 40px;
    left: 410px;
    width: 500px;
    height: 400px;
    background: grey;
}
.elanbasligi{
    position: absolute;
    top:10px;
    left: 10px;
    font-size: 20px;
}
.haqqinda{
    font-size: 20px;
    position: relative;
    top: 40px;
    margin-left: 10px;
}
 this is html 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="ferhadsatilir.css">
    
</head>
<body>
<div class='butunsekiller'>

<div class='sekil1'><img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/1969_Dodge_Charger_%2821572136732%29.jpg/1280px-1969_Dodge_Charger_%2821572136732%29.jpg></div> <br>

<div class='sekiller'>
<div class='sekil2'><img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/1969_Dodge_Charger_%2821572136732%29.jpg/1280px-1969_Dodge_Charger_%2821572136732%29.jpg></div> 

<div class='sekil3'><img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/1969_Dodge_Charger_%2821572136732%29.jpg/1280px-1969_Dodge_Charger_%2821572136732%29.jpg></div> 


<div class='sekil4'><img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/1969_Dodge_Charger_%2821572136732%29.jpg/1280px-1969_Dodge_Charger_%2821572136732%29.jpg></div> 
</div>
</div>
<div class='elanbasligi'><h3>Ferhad satilir</h3></div> <br> 
<div class='haqqinda'>
<div class='qiymet'>qiymet :22AZN</div> <br>
<div class='seher'>seher : baki</div> <br>
<div class='katagoriya'>katagoriya :bir sey</div> <br>
<div class='nomre'>elaqe nomresi : 066236487623864</div> <br>
<div class='elanhaqqinda'>elanhaqqinda : yazilar</div> <br>
</div>
</body>
</html>

标签： htmlcss

解决方案

我发现将网页视为包含内容的容器很有帮助。每个里面有东西的元素都是一个容器，内容是孩子。

无论您在页面上单击什么（img、按钮等），您都在单击容器内的某些内容（div、p、a 等）。（容器的另一种说法是盒子，DOM 是围绕盒子模型构建的——这个超级简单的想法是理解 CSS 的关键）

Flexbox 使得在容器中居中放置东西变得非常容易。在下面的示例中，我们有一个占页面 100% 的 div（宽度/高度 100%）。我们想在容器内居中图像。因此，我们将以下内容添加到父级（即 div）：

  display:flex;
  align-items:center;
  justify-content: center;


*{margin:0;}
div{
height:100vh;
width:100vw;
}

.flex-parent{
  display:flex;
  align-items:center;
  justify-content: center;
}
<div class="flex-parent">

  <img src="https://placekitten.com/300/200" />

</div>

在您的 codepen 中，如果您想在左侧有一个大的、居中的图像，而在右侧有一堆缩略图，这就是我可能的结构。

首先，将页面分成左右两个容器。

左侧容器的样式将与我在上面所做的演示中完全相同（实际上，html 几乎相同）。

正确的容器将包含所有其他 div，就像您拥有它们一样。但是右侧容器本身的样式只是：

.right-side{ display: flex;}

信不信由你，这会成功的。这是演示：

*{margin:0;} /*  Required for StackOverflow Snippets */

.main{
  display:flex;
  height:100vh;
  width:100vw;
}
.left-side{
  width: 900px;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:lavender;
}

.right-side{
  display:flex;
  flex-wrap:wrap;
  background:palegoldenrod;
}

.right-side > div{
  margin:10px;
}
<div class="main">

  <div class="left-side">
    <div>
      <img src=https://placekitten.com/200/200 />
    </div> 
  </div>
  
  <div class="right-side">
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
    <div><img src=https://placekitten.com/80/80 /></div> 
  </div>
  

</div>

请注意，flexbox 子级也可以是 flexbox 父级。例如，.maindiv 是弹性框的父级。但是它的两个直系孩子（.left-side和.right-side）也是如此。

参考：

Flexbox 的优秀、快速的视频教程

Flexbox 的简单备忘单

推荐阅读