将每个对象居中对齐答案

【问题标题】：align every object in the middle将每个对象居中对齐
【发布时间】：2020-06-25 23:43:25
【问题描述】：

所以，我有这个页面https://imgur.com/a/39Y6yjh 我想将所有的 div 对齐，我该怎么做？

我认为我必须更改中间窗格类中的某些内容，但我不知道是什么，我尝试将浮动从左更改为中间，但它只会弄乱页面，所以 idk。

顺便说一句，我是 css/html 的新手，如果不好，请见谅

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>idk</title>
    <link rel="stylesheet" href="css/index-principale.css">
    <link rel="stylesheet" href="css/index-principale-altro.css">
</head>

<body>
    <div class="container">
        <div class="leftpane">
            <div>
                <p>idk</p>
            </div>
        </div>
        <div class="middlepane">
            <div class="container-immagini">
                <img src="immagini/immagini-poesie/1.png" alt="">
            </div>
        </div>
        <div class="rightpane">
            <div>
                <p>idk</p>
            </div>
        </div>
    </div>
</body>

</html>

和css：

    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    
    .container {
        width: 100%;
        height: 100%;
    }
    
    .leftpane {
        /*setting di pagina*/
        width: 25%;
        height: 100%;
        float: left;
        border-collapse: collapse;
        /*altro*/
        background-color: #EFEDE1;
    }
    
    .middlepane {
        /*setting di pagina*/
        width: 50%;
        height: 100%;
        float: left;
        border-collapse: collapse;
        /*altro*/
        background-color: #EFEDE1;
    }
    
    .rightpane {
        /*setting di pagina*/
        width: 25%;
        height: 100%;
        float: left;
        border-collapse: collapse;
        /*altro*/
        background-color: #EFEDE1;
    }

    .leftpane div {
        /*settings iniziali per centrarlo*/
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /*impostazioni del colore del quadrato*/
        width: 400px;
        height: 400px;
        background-color: #E7B2B2;
    }
    
    .leftpane div p {
        /*base
            questo e' il colore della scritta*/
        color: #EFEDE1;
        font-size: 70px;
        /*per spostarlo al centro*/
        position: relative;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    /*
        Playfair Display - 900
        colore = EFEDE1
        sfondo = E7B2B2
    */
    /*****************centro****************/
    
    .container-immagini {
        /*settings iniziali per centrarlo*/
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: black;
        /*dimensioni immagini*/
        width: 600px;
        height: 600px;
    }
    
    .container-immagini img {
        /*gli do la dimensione in base alla classe prima*/
        width: 100%;
        height: 100%;
    }
    /*****************destra****************/
    
    .rightpane div {
        /*settings iniziali per centrarlo*/
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /*impostazioni del colore del quadrato*/
        width: 400px;
        height: 400px;
        background-color: #E7B2B2;
    }
    
    .rightpane div p {
        /*base
            questo e' il colore della scritta*/
        color: #EFEDE1;
        font-size: 70px;
        /*per spostarlo al centro*/
        position: relative;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

【问题讨论】：

“将所有 div 对齐”是什么意思？

标签： html css alignment vertical-alignment

【解决方案1】：

假设你想垂直对齐它们，你需要做的就是改变：

position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

到：

margin: 50% 50%;
transform: translate(-50%, 0%);

在你的内部 .rightpane div 和 .leftpane div 选择器

所以它看起来像这样：

.leftpane div {
    /*settings iniziali per centrarlo*/
    margin: 50% 50%;
    transform: translate(-50%, 0%);
    /*impostazioni del colore del quadrato*/
    width: 400px;
    height: 400px;
    background-color: #E7B2B2;
}

...

.rightpane div {
    /*settings iniziali per centrarlo*/
    margin: 50% 50%;
    transform: translate(-50%, 0%);
    /*impostazioni del colore del quadrato*/
    width: 400px;
    height: 400px;
    background-color: #E7B2B2;
}

...

【讨论】：

【解决方案2】：

要垂直和水平对齐项目，您可以将父元素的display 设置为flex。然后将align-items 和justify-content 属性设置为center。

#parent {
  width: 450px;
  height: 300px;
  background-color: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

.align {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
 }

<div id="parent">
  <div class="align"></div>
  <div class="align"></div>
  <div class="align"></div>
</div>

【讨论】：

另外，我不建议过度依赖浮动。您可以尝试使用 flexbox 或 css grid 代替，它会为您省去很多麻烦。这里有一些资源可以帮助你。 css-tricks.com/snippets/css/a-guide-to-flexbox css-tricks.com/snippets/css/complete-guide-grid