Question

我在1 2 3 4 5元素（图像下方的黑色元素）中有一个-90°定位2 3 4 5 6。我希望“Hi”文本垂直和水平放置在中心。我发现了类似的问题，重复我的，但无论如何我没有找到解决方案。

以下是有问题的代码：

p#rot

以下是完整代码段（我没有包含图片）：

div#leftPosText

    div#leftPosText{
 position:absolute;
padding:2vh;
 background-color:black;
width:20vw;
height:50vh;
font-size:calc(5vh + 5vw);

text-align:center;
vertical-align:middle;
}
p#rot{

transform:rotate(-90deg);
color:white;
 text-align:center; 
 position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0; 
}

const maxFiles = 159;
const randomEl = document.getElementById("random");
function randombg() {
  var random = Math.floor(Math.random() * maxFiles)+1;
  randomEl.style.backgroundImage = `url('images/(${random}).jpeg')`;

}
randombg();

Answer 1

如果你将旋转的段落的父级（div#leftPosText）设置为一个弹性容器并在其上设置对齐，那么你已经完成了设置。

const maxFiles = 159;
const randomEl = document.getElementById("random");
function randombg() {
  var random = Math.floor(Math.random() * maxFiles)+1;
  randomEl.style.backgroundImage = `url('images/(${random}).jpeg')`;

}
randombg();

*{
overflow-x:hidden;
    margin:0;
    padding:0;
    transition:1s;
	
}

 body,html{
     margin:0;
     padding:0;
}
 #random{
 
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     min-width: 100vw;
     height: 100vh;
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center center;
     z-index:-2;
     font-size:calc(1vh + 1vw);
	 height:100vh;
}
 p#FrontText{
     font-size:calc(5vh + 5vw);
     opacity:1;
}
 div#headText{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color:white;
     opacity:0.6;
     border:1px solid white;
     padding:calc(1vh + 1vw);
     border-radius:0.1em;
     
	 box-shadow:0 0 25px white;
	  
}

 div#overlayStart{
 position:absolute;
 top:0;left;0;
 width:100vw;
 height:100vh;
 z-index:0;
 opacity:0.3;
     background: -webkit-linear-gradient(221deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
     background: -o-linear-gradient(221deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
     background: linear-gradient(229deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
     -webkit-background-size: 7400% 7400%;
     background-size: 7400% 7400%;
     -webkit-animation: backgroundGardient 500s ease infinite;
     animation: backgroundGardient 200s ease infinite;
    

}
 @-webkit-keyframes backgroundGardient{
    0%{
        background-position: 0% 83%
    }
    50%{
        background-position: 100% 18%
    }
    100%{
        background-position: 0% 83%
    }
}
@keyframes backgroundGardient{
    0%{
        background-position: 0% 83%
    }
    50%{
        background-position: 100% 18%
    }
    100%{
        background-position: 0% 83%
    }
}
div#leftPosText{
 position:absolute;
 padding:2vh;
 background-color:black;
 width:20vw;
 height:50vh;
 font-size:calc(5vh + 5vw);
 display:flex;         /* Parent becomes a flex container */
 align-items:center;   /* Alignment will inherit to children */
}
p#rot{
 transform-origin:center center;
 transform:rotate(-90deg);
 color:white;
 text-align:center; 
 position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
div#mainTextOne{
 background-color: #ecf0f1;
 width:80vw;
 text-align:center;
 left:calc(20vw + 4vh);
 position:absolute;
}

<Doctype>
<html>
<meta charset='utf-8'>
<head>

</head>
<body>
<div id='random'>
</div>
<div id='overlayStart'></div>
<div id='headText'><p id='FrontText'>Hello!</p></div>
<div id='leftPosText'><p id='rot'>Hi</p></div>
<div id='mainTextOne'>hi</div>

</body>
</html>

将p放在div的中心位置

1 个答案: