教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 337 CSS
HTML中标签的块级元素居中问题的解决方法
来源：互联网
2023-03-16 19:11:42 92
在进行前端开发中，标签元素的居中问题是我们经常会遇到，比如文字的居中，行内元素的居中。我们也会碰到需要将块级元素居中的问题，所以将为大家分享块级元素居中的几种解决方案。
工具/原料
- submit text开发工具
- windows
- 浏览器
方法/步骤
首先，我们通过一段html代码来模拟块级元素需要居中的场景，代码如下：
html>
head>
title>/title>
/head>
style>
.parent{
width:200px;
height:100px;
background: blue;
}
.sub{
width:50px;
height:50px;
background:white;
text-align: center;
}
/style>
body>
div class="parent">
div class="sub">居中元素/div>
/div>
/body>
/html>
使用margin居中。只需要将需要居中div的水平margin设置auto就可以实现水平居中。我们值需要在上一个步骤css代码.sub段添加margin：0auto；即可修改，代码如下：
.sub{
width:50px;
height:50px;
background: white;
margin:0 auto; //添加这行代码
text-align: center;
}
父级元素padding居中，我们可以在居中元素添加父级div通过计算使得白色div居中父级的padding值是多少就可以通过父级div的padding来居中。
html>
head>
title>/title>
/head>
style>
.parent{
height:100px;
width: 200px;
background: blue;
}
.contain{
padding-left: 75px
}
.sub{
width:50px;
height:50px;
background: white;
text-align: center;
}
/style>
body>
div class="parent">
!--为sub添加父级div-->
div class="contain">
div class="sub">居中元素/div>
/div>
/div>
/body>
/html>
使用相对定位居中，通过relative将需要居中的块级元素相对父级居中，通过需要计算需要居中的距离。
代码如下：
html>
head>
title>/title>
/head>
style>
.parent{
height:100px;
width: 200px;
background: blue;
position: absolute;
}
.sub{
width:50px;
height:50px;
background: white;
text-align: center;
position: relative;
left: 75px;
}
/style>
body>
div class="parent">
div class="sub">居中元素/div>
/div>
/body>
/html>
通过上面几个步骤操作，梳理一下块级元素居中几种方式：
1.使用margin：0auto；居中
2.计算父级padding值进行居中
3.使用相对定位居中。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：html表格边框线怎么设置 下一篇：如何用css制作横向有竖线的列表
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 479 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 327 CSS