为啥我的 textarea 不能正好在中间居中？

Posted

技术标签:

【中文标题】为啥我的 textarea 不能正好在中间居中？【英文标题】：Why won't my textarea be centered exactly in the middle?为什么我的 textarea 不能正好在中间居中？ 【发布时间】：2022-01-05 09:59:10 【问题描述】：

我正在尝试进行打字测试，但在尝试将 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 代码 【参考方案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...

【讨论】：

以上是关于为啥我的 textarea 不能正好在中间居中？的主要内容，如果未能解决你的问题，请参考以下文章

为啥这个 textarea 不能假设它在 Chrome 中的父级的全部高度？

winform 程序 直接打开时 窗口大小正好 可最大化后就停靠在左上角了 能不能最大化后还是居中呢

如何防止调整大小的TextArea溢出页面？

为啥不能控制更新/刷新中间过程

为啥 <textarea> 不自动关闭？ [复制]

为啥我不能将用于关闭模态组件的“a”元素居中？