html5 main标签怎么居中?main标签的居中实例介绍

本篇文章中主要的介绍了关于HTML5 main标签的居中,里面有完整的main标签的用法实例,现在让我们一起来看这篇关于HTML5 main标签的介绍吧

首先我们先看看html5 main标签要怎么居中:

<main>标签规定文档的主要内容。

<main>元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释:在一个文档中,不能出现一个以上的<main>元素。<main>元素不能是以下元素的后代:<article>、<aside>、<footer>、<header>或<nav>。

说了这么多定义来看看main标签的居中完整代码实例吧:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>编程之家</title>
</head>
<body>
<main align="center">
  <h1>编程之家</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome是由Google开发的一款免费的开源web浏览器,于2008年发布。</p>
  </article>
  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer由微软开发的一款免费的web浏览器,发布于1995年。</p>
  </article>
  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox是一款来自Mozilla的免费开源web浏览器,发布于2004年。</p>
  </article>
</main>
</body>
</html>

我把main标签里面加上了一个align属性,意思是让整个文档全部往中间对齐,来看看在浏览器中显示的效果:

tuyi.png

可以很清楚的看到,因为文章的大小,放不了太大的网页,只能缩小了,但是还是能很清楚的看到这些图片中间的位置的文字。

好了,本篇文章到这也就结束了(想学更多就来编程之家,百度搜索编程之家,里面有你想要的编程课程和资料),有问题的可以在下方进行提问

【小编推荐】

html中的ol标签如何去掉标号呢?<ol>标签的使用方法总结

HTML中ul标签如何去掉点?HTML无序列表的样式实例解析

以上就是html5 main标签怎么居中?main标签的居中实例介绍的详细内容,更多请关注编程之家其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法