论坛 › 马黑黑教程专版 › 调整textarea大小保持其水平居中的方法

马黑黑 发表于 2026-2-13 12:51

调整textarea大小保持其水平居中的方法

<style>
        #showDiv { font-size: 18px; }
        #showDiv p { margin: 10px 0; }
        #showDiv code { background: #afeeee; padding: 2px 4px; tab-size: 4; }
</style>

<div id="showDiv">
<p>textarea元素默认可调节尺寸：往右、下方向拖曳元素左下角。当拖曳行为发生，textarea元素左、上位置固定不变，元素仅往右、下方向扩张。有时候我们希望textarea元素在改变尺寸时上边位置固定、元素保持居中。这个，仅需要CSS就可以实现，请看代码：</p>
<pre><code>&lt;style&gt;
        .mnDiv {
                margin: 20px auto;
                width: 800px;
                height: 600px;
                display: grid;
                place-items: start center;
                position: relative;
        }
        .mnDiv textarea {
                position: absolute;
                box-sizing: border-box;
                width: 100%; height: 100%;
                padding: 16px;
                font-size: 16px;
        }
&lt;/style&gt;

&lt;div class="mnDiv"&gt;
        &lt;textarea&gt;&lt;/textarea&gt;
&lt;/div&gt;
</code></pre>
<p>【<strong>代码解读</strong>】</p>
<p>代码中，使用一个div包裹textarea元素，这么做的好处有二：其一，需要改变文本控件尺寸时只需要改变div的尺寸；其二，外围div元素可以有效约束文本控件。</p>
<p>父元素div约束子元素文本控件的关键在于 display 属性的设置，代码中使用了 grid 布局，通过 place-items 属性强制子元素垂直居上、水平居中，这样，不论子元素尺寸如何变化，其中心点永远都会和父元素的中心点重合。至于父子元素的position属性设置则是为了令元素的可控性更强。</p>
<p>【附】<br><br>① 禁止textarea元素改变尺寸：<code>resize: none;</code>；<br>② 使用 flex 弹性布局可以实现相同的效果；<br>③ 效果演示放在下楼。</p>
</div>

马黑黑 发表于 2026-2-13 12:52

<style>
        .mnDiv {
                margin-top: 120px;
                left: calc(50% - 81px);
                transform: translateX(-50%);
                width: 800px;
                height: 600px;
                display: grid;
                place-items: start center;
                z-index: 12;
                position: relative;
        }
        .mnDiv textarea {
                position: absolute;
                box-sizing: border-box;
                width: 100%; height: 100%;
                padding: 16px;
                font-size: 16px;
                resize: auto;
        }
</style>

<h2>效果演示：</h2>
<div class="mnDiv">
        <textarea placeholder="拖曳右下角改变文本框尺寸"></textarea>
</div>

红影 发表于 2026-2-13 20:54

原来也可以左右同时变化，只有上边固定，这样的变化可以让元素保持居中。
黑黑的讲述很详细，辛苦了{:4_187:}

马黑黑 发表于 2026-2-14 11:58

红影 发表于 2026-2-13 20:54
原来也可以左右同时变化，只有上边固定，这样的变化可以让元素保持居中。
黑黑的讲述很详细，辛苦了{:4_18 ...

{:4_190:}

查看完整版本: 调整textarea大小保持其水平居中的方法