HTML5中main标签的居中的实现方法是什么
Admin 2022-07-15 群英技术资讯 869 次浏览
关于“HTML5中main标签的居中的实现方法是什么”的知识有一些人不是很理解,对此小编给大家总结了相关内容,具有一定的参考借鉴价值,而且易于学习与理解,希望能对大家有所帮助,有这个方面学习需要的朋友就继续往下看吧。首先我们先看看html5 main标签要怎么居中:
<main>标签规定文档的主要内容。
<main>元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
注释:在一个文档中,不能出现一个以上的<main>元素。<main>元素不能是以下元素的后代:<article>、<aside>、<footer>、<header>或<nav>。
说了这么多定义来看看main标签的居中完整代码实例吧:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<main align="center">
<h1>PHP中文网</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属性,意思是让整个文档全部往中间对齐,来看看在浏览器中显示的效果:

可以很清楚的看到,因为文章的大小,放不了太大的网页,只能缩小了,但是还是能很清楚的看到这些图片中间的位置的文字。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本文通过代码给大家介绍css背景和边框标签的一些知识,通过相关属性设置背景颜色,背景图像,对css背景与边框的相关知识感兴趣的朋友一起看看吧
本篇文章给大家带来了css定位布局的相关知识,下面我们就来看一下什么是相对定位、绝对定位以及定位不同的元素性质与用途等知识,希望对大家有帮助。
SS中的居中出现无效的问题怎样解决?一些朋友在使用在使用text-align或者是margin:0 auto进行居中时,出现居中无效的情况,那么这个问题究竟有什么方法来解决呢?下面我们来看两个示例。
这篇文章主要介绍了html中input提示文字样式修改,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
这篇文章给大家分享的是有关CSS边距重叠问题,在使用CSS排版布局时,会发现兄弟或者父子节点设置的上下外边距会发生重叠现象,那么这个重叠的问题要如何解呢?下面我们一起来了解看看。
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008