我想創建一個網頁，它以數字作為輸入，然后偶數或奇數背景顏色根據數字而變化，例如，如果我輸入 2，則奇數背景顏色變為灰色，甚至背景顏色變為綠色，我希望你明白我想要什么要做的事情是我想將輸入欄位放在圖片中的中間，有人可以幫我怎么做嗎？這對未來的用途也非常有幫助，謝謝！！！！
uj5u.com熱心網友回復：
設定在 input display flex 的容器中，然后它就會在頁面的中間，就像這樣：
display:flex; justify-content:Center; align-items:center;
uj5u.com熱心網友回復：
我在下面添加了一個解決方案。你還有一個額外的結束 div 標簽，但它沒有打開的標簽，我也為你洗掉了它。
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.top {
z-index: 2;
width: 100%;
left: 0;
right: 0;
}
.left {
z-index: 1;
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
border-radius: 50%;
}
form {
height: 100%;
}
.form-group {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
<div class="split top">
<form method ="POST">
<div class="form-group">
<label for="Id_messsage">Message</label>
<textarea class="form-control" id=Id_message" name="message" rows="5"></textarea>
</div>
</form>
</div>
<div class="split left">
<div class="centered">
<h2>EVEN</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>ODD</h2>
</div>
</div>
uj5u.com熱心網友回復：
要將輸入放在框的中間，您可以使用 from position absolute，并且根據框的大小，您應該為輸入設定 'left' 和 'top' 樣式，例如在我的示例中：
<body>
<div class="box box1">EVEN</div>
<div class="box box2">ODD</div>
<input type="text" name="input" />
</body>
CSS：
*{
box-sizing: border-box;
}
.box{
float: left;
padding: 200px;
width: 50%;
}
.box1{
background-color: green;
}
.box2{
background-color: red;
}
input{
position: absolute;
left: 45%;
top: 200px;
padding: 5px;
border-radius: 10px;
}
uj5u.com熱心網友回復：
- 為
.split.topz-index添加規則 - 更改
textarea為<input type="text" />
——
.split.top {
z-index: 2;
margin: auto;
width: 100%;
top: 46%;
}
輸出：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385338.html
標籤：javascript html css