这篇文章主要讲解了“HTML水平居中方法与怎么设计一个团购界面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML水平居中方法与怎么设计一个团购界面”吧！
一、水平居中
1.margin:0 auto在绝对定位中就失效了
2.如何让绝对定位的元素水平居中？
只需要设置绝对定位元素的left:50%；然后再设置绝对定位元素的margin-left:-元素宽的一半；
这样就可以完成水平居中了
div{
width:50px;/*如果数值为100%，就代表这个div的宽度就是浏览器的整个宽度*/
height:50px;
background-color: red;
position:absolute;
left:50%;/*使用百分比意味着这个绝对定位的块左边距离浏览器一半的距离*/
}
.......省略代码......
<body>
<div></div>
</body>
二、团购界面
注意点：这里的标志以及电脑配置，都是通过设置背景图片和绝对定位、相对定位来?进行配置上的；这里面使用了span这个标签，由于已经脱离了标准流，因此不需要在设置为display:inline-block;了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D155_GroupPurchase</title>
<style>
*{
margin:0px;
padding:0px;
}
div{
width: 500px;
height: 550px;
border:1px black solid;
margin:0 auto;
margin-top:100px;
position:relative;/*这里想要利用子绝父相来进行排版图片的商标和配置的信息*/
}
div img{
width: 500px;
height: 500px;
}
div .brand{
width: 111px;
height: 29px;
background: url("image/laptop_label.jpg") no-repeat -21px -12px;
position:absolute;
left: 20px;
top:0px;
}
div .configuration{
width: 435px;
height: 40px;
background:url("image/laptop_label.jpg") no-repeat -78px -515px;
position:absolute;
left:20px;
top:505px;
}
</style>
</head>
<body>
<div>
<img src="image/laptop.jpg" alt="">
<span class = "brand"></span>
<span class = "configuration"></span>
</div>
?
</body>
</html>感谢各位的阅读，以上就是“HTML水平居中方法与怎么设计一个团购界面”的内容了，经过本文的学习后，相信大家对HTML水平居中方法与怎么设计一个团购界面这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
