为什么我的 textarea 不能正好在中间居中？答案

【问题标题】：Why won't my textarea be centered exactly in the middle?为什么我的 textarea 不能正好在中间居中？
【发布时间】：2023-04-07 22:57:02
【问题描述】：

我正在尝试进行打字测试，但在尝试将 textarea 准确地设置在中心时遇到了麻烦。我试过 align-items、align-self、align-content，但没有任何效果。这是我的代码的样子：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Impact";

}

body{
    background-color: grey;
}

.container{
    width: 80vmin;
    padding: 50px 30px;
    background-color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 20px 40px;
}

.stats{
    text-align: right;
    font-size: 18px;
    margin-bottom: 30px;
}

textarea{
    align-content: center;
    resize: none; 
    width: 100%;
    border-radius: 5px;
    padding: 10px 5px;
    font-size: 16px;
    margin:20px
}

button{
    float: right;
    margin-top: 20px;
    background-color: gold;
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
    margin: 10px;

}

button:hover{
    background-color:rgb(66, 154, 209)
}

button:active{
    background:#003659
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width,
        initial-scale=1.0" />
        <title>My Typing Test</title>
        <link rel="stylesheet" href="Test.css" />
    </head>

    <body>
        <div class="container">
            <div class="stats">
                <p>Time: <span id="time">0s</span></p>
                <p>WPM: <span id="wpm">0</span></p>
            </div>

            <div id="words" onmousedown="return false"
            onselect="return false">
            </div>

            <textarea rows="3"></textarea>

            <div class= "ButtonControl">
                <button id= "Start Timer">Start Test</button>
                <button id= "Reload Page">Reset Test</button>
            </div>

        </div>
        <script src="Test.js"></script>
    </body>
</html>

即使用户尝试调整窗口大小，我如何使文本区域居中？

【问题讨论】：

这看起来像是 this question 的副本。
使用 flexbox，我会在几分钟内发送 da 代码

标签： html css textarea

【解决方案1】：

您的textarea 因保证金问题而无法使用。
你设置了width: 100%; 和margin: 20px;，所以textarea 离开了20px。
您可以通过删除margin: 20px（第一个示例）或添加具有20px padding 并包含textarea 的新div 来解决它。（第二个示例）。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Impact";

}

body{
    background-color: grey;
}

.container{
    width: 80vmin;
    padding: 50px 30px;
    background-color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 20px 40px;
}

.stats{
    text-align: right;
    font-size: 18px;
    margin-bottom: 30px;
}

textarea{
    align-content: center;
    resize: none; 
    width: 100%;
    border-radius: 5px;
    padding: 10px 5px;
    font-size: 16px;
}

button{
    float: right;
    margin-top: 20px;
    background-color: gold;
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
    margin: 10px;

}

button:hover{
    background-color:rgb(66, 154, 209)
}

button:active{
    background:#003659
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width,
        initial-scale=1.0" />
        <title>My Typing Test</title>
        <link rel="stylesheet" href="Test.css" />
    </head>

    <body>
        <div class="container">
            <div class="stats">
                <p>Time: <span id="time">0s</span></p>
                <p>WPM: <span id="wpm">0</span></p>
            </div>

            <div id="words" onmousedown="return false"
            onselect="return false">
            </div>

            <textarea rows="3"></textarea>

            <div class= "ButtonControl">
                <button id= "Start Timer">Start Test</button>
                <button id= "Reload Page">Reset Test</button>
            </div>

        </div>
        <script src="Test.js"></script>
    </body>
</html>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Impact";

}

body{
    background-color: grey;
}

.container{
    width: 80vmin;
    padding: 50px 30px;
    background-color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 20px 40px;
}

.stats{
    text-align: right;
    font-size: 18px;
    margin-bottom: 30px;
}

.TextControl {
    padding: 0 20px;
}

textarea{
    align-content: center;
    resize: none; 
    width: 100%;
    border-radius: 5px;
    padding: 10px 5px;
    font-size: 16px;
}

button{
    float: right;
    margin-top: 20px;
    background-color: gold;
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
    margin: 10px;

}

button:hover{
    background-color:rgb(66, 154, 209)
}

button:active{
    background:#003659
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width,
        initial-scale=1.0" />
        <title>My Typing Test</title>
        <link rel="stylesheet" href="Test.css" />
    </head>

    <body>
        <div class="container">
            <div class="stats">
                <p>Time: <span id="time">0s</span></p>
                <p>WPM: <span id="wpm">0</span></p>
            </div>

            <div id="words" onmousedown="return false"
            onselect="return false">
            </div>

            <div class="TextControl"><textarea rows="3"></textarea></div>

            <div class= "ButtonControl">
                <button id= "Start Timer">Start Test</button>
                <button id= "Reload Page">Reset Test</button>
            </div>

        </div>
        <script src="Test.js"></script>
    </body>
</html>

【讨论】：

【解决方案2】：

基本上在文本区域周围制作了一个弹性容器，并将其所有内容居中

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Impact";

}

body{
    background-color: grey;
}

.container{
    width: 80vmin;
    padding: 50px 30px;
    background-color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 20px 40px;
}

.stats{
    text-align: right;
    font-size: 18px;
    margin-bottom: 30px;
}

textarea{
    align-content: center;
    resize: none; 
    width: 100%;
    border-radius: 5px;
    padding: 10px 5px;
    font-size: 16px;
    margin:20px
}
                   /* new code here */
          .testbox{
        display: flex; 
          align-items: center;
        justify-content: center; }
     button{
    float: right;
    margin-top: 20px;
    background-color: gold;
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
    margin: 10px;

       }

         button:hover{
    background-color:rgb(66, 154, 209)
      }

             button:active{
    background:#003659
             }

       <!DOCTYPE html>
       <html lang="en">
    <head>
        <meta name="viewport" content="width=device-width,
        initial-scale=1.0" />
        <title>My Typing Test</title>
        <link rel="stylesheet" href="Test.css" />
    </head>

    <body>
        <div class="container">
            <div class="stats">
                <p>Time: <span id="time">0s</span></p>
                <p>WPM: <span id="wpm">0</span></p>
            </div>

            <div id="words" onmousedown="return false"
            onselect="return false">
            </div>
                     
               <!-- new code here -->      <div class="testbox" >  <textarea 
                    rows="3"></textarea>  </div>

            <div class= "ButtonControl">
                <button id= "Start Timer">Start Test</button>
                <button id= "Reload Page">Reset Test</button>
            </div>

        </div>
        <script src="Test.js"></script>
           </body>
        </html>

【讨论】：

对我有用，你应该使用这个

【解决方案3】：

尝试在容器中使用 position: relative 并在texterea中定位绝对，然后你可以定义 left: some px...

【讨论】：