HTML 文字方塊居中有多種方式:文字輸入框:使用CSS 程式碼input[type="text"] { text-align: center; }文字區域:使用CSS 程式碼textarea { text-align: center; }水平居中:在文字方塊父元素上使用text-align: center 樣式垂直居中:使用vertical-align 屬性input[type="text"] { vertical-align: middle; }Flexbox:使用display:
如何讓HTML 文字方塊居中
在HTML 中讓文字方塊居中有多種方法,這取決於要居中的文字方塊類型和整體佈局。
文字輸入框
對於文字輸入框,可以使用以下CSS 程式碼:
<code class="css">input[type="text"] { text-align: center; }</code>
文字區域
對於文字區域,可以使用以下CSS 程式碼:
<code class="css">textarea { text-align: center; }</code>
水平居中
如果需要水平居中文字框,可以在文字方塊的父元素上使用text-align: center
樣式:
<code class="html"><div style="text-align: center;"> <input type="text" value="文本"> </div></code>
垂直居中
對於垂直居中,可以使用vertical-align
屬性:
<code class="css">input[type="text"] { vertical-align: middle; }</code>
透過Flexbox
Flexbox 是一種強大的佈局系統,可以輕鬆實現文字方塊居中:
<code class="html"><div style="display: flex; justify-content: center;"> <input type="text" value="文本"> </div></code>
#注意點
overflow: scroll
或 word-wrap: break-word
樣式,以防止文字溢出。 以上是html如何讓文字方塊居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!