在 html 中,使用 css 樣式可以實(shí)現(xiàn)居中對(duì)齊:水平居中:使用 text-align 屬性(如 text-align: center;)垂直居中:使用 vertical-align 屬性(如 vertical-align: middle;)
HTML 中的居中
在 HTML 中,我們可以通過(guò)使用 CSS 樣式來(lái)控制元素的居中對(duì)齊。有兩種方法可以實(shí)現(xiàn)居中:水平居中和垂直居中。
水平居中
可以使用 text-align
屬性將元素水平居中。該屬性的值可以是:
left: 將元素左對(duì)齊
center: 將元素居中對(duì)齊
right: 將元素右對(duì)齊
例如,要水平居中一個(gè)段落,可以使用以下代碼:
<code class="html"><p style="text-align: center;">水平居中的段落</p></code>
登錄后復(fù)制
垂直居中
要垂直居中一個(gè)元素,可以使用 vertical-align
屬性。該屬性的值可以是:
top: 將元素頂部對(duì)齊
middle: 將元素垂直居中對(duì)齊
bottom: 將元素底部對(duì)齊
例如,要垂直居中一個(gè)圖像,可以使用以下代碼:
<code class="html"><img src="image.jpg" style="max-width:90%" alt="html中的居中怎么寫(xiě)" ></code>
登錄后復(fù)制
還可以使用以下 CSS 規(guī)則來(lái)同時(shí)實(shí)現(xiàn)水平和垂直居中:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">.centered { text-align: center; vertical-align: middle; }</code>
登錄后復(fù)制
將此類應(yīng)用到元素將使其同時(shí)水平和垂直居中。