所以，我有了这个页面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%);
}
如果你想要将它们垂直对齐，你需要做的就是改变:
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;
}
...
