如何实现标签元素在HTML页面中居中显示

如何实现标签元素在HTML页面中居中显示

在HTML页面设计中常常需要实现标签元素在HTML页面中居中显示,相关知识点较多也较杂乱,本文试图介绍一些比较基本与实用的相关知识。

使用标签的align属性

使用标签的align属性指定标签在HTML页面中显示的位置align="left|right|center|justify|char",特别提示两点:

第一点是align属性有的标签直接支持,有的不直接支持

支持align属性的标签

、、、、、、
等标签的 align 属性设置,如:

忽如一夜春风来,千树万树梨花开。

对如不直接支持align属性的标签

使用 CSS 的 height 和 width 属性设置,如:

若对同一个多行文本框同时设置两者,后者有效。

设置多行文本框的大小示例



    
        
        
    
    
        
文本域:



保存文件名:多行文本框的大小.html,用浏览器打开效果:

如何实现标签元素在HTML页面中居中显示_第5张图片

修改上面的源码,让textarea标签定义的文本区域(text area)水平居中显示:



    
        
        
    
    
        
文本域:



保存文件名:多行文本框的水平居中.html,用浏览器打开效果:

 如何实现标签元素在HTML页面中居中显示_第6张图片

相关的内容还有很多,感兴趣的读者可以参考下面给出的链接。

权威资料

外边距—margin:margin - CSS(层叠样式表) | MDN

CSS 外边距 

浮动—float:float - CSS(层叠样式表) | MDN

position:position - CSS(层叠样式表) | MDN

flex 布局flex 布局的基本概念 - CSS(层叠样式表) | MDN

好博文

如何让一个子元素在父容器里水平垂直居中

前端学习(21)~css学习:如何让一个元素水平垂直居中? - 腾讯云开发者社区-腾讯云

CSS十问之元素居中

CSS十问之元素居中 - 腾讯云开发者社区-腾讯云

你可能感兴趣的:(HTML5与CSS3,前端开发,html,css)