网页布局的居中问题，如何让文本居中，如何让div居中，怎样让div居中？居中都有哪几种情况
关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：1、文本，图片等内联元素的水平居中。text-align:center2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto3、不定宽块状元素水平居中 方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto 方案二：将子元素转换为
·
关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：
1、文本，图片等内联元素的水平居中。text-align:center
2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto
3、不定宽块状元素水平居中
方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto
方案二：将子元素转换为内联块状元素，给父元素设置text-align:center;
4、不定宽高的元素在屏幕窗口水平垂直都居中
5、不定宽高元素在父元素中水平垂直都居中
-----------------------------以下为详细内容-------------------------------------------------
1、文本，图片等内联元素的水平居中。
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。
如：
<style type="text/css">
.imgBox{
border: 1px solid black;
text-align: center;
}
h1{
border: 1px solid black;
text-align: center;
}
.menu{
border: 1px solid black;
text-align: center;
}
form{
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<!-- 一张图片在父容器中水平居中 -->
<div class="imgBox">
<img src="img/pic2.png"/>
<span style="background-color: red;">我是span</span>
</div>
<!-- 文本内容在父容器中水平居中 -->
<h1>我是标题</h1>
<!-- 内联元素在父容器中水平居中 -->
<div class="menu">
<a href="#">新闻资讯</a>
<a href="#">课程介绍</a>
<a href="#">关于我们</a>
<a href="#">在线留言</a>
<a href="#">师资力量</a>
<a href="#">联系我们</a>
</div>
<form action="">
<input type="text"/>
<input type="submit" value="百度一下"/>
</form>
</body>
</html>2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto
<style type="text/css">
body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
background: black;
}
.header_con{
width: 1000px;
height: 100px;
background: red;
margin:0 auto;
}
</style>
</head>
<body>
<!-- 定宽块状元素在浏览器窗口或父容器中水平居中 -->
<div class="header">
<div class="header_con"></div>
</div>
<!-- 总结：满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的 -->
</body>3、不定宽块状元素水平居中
方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto
<style type="text/css">
.box1{
display: table;
margin:0 auto;
}
.box1 a{
display: block;
float: left;
padding:3px 5px;
}
</style>
</head>
<body>
<!-- 网页中的分页效果，分页的页数不定，但是始终是居中的效果，如何实现？ -->
<!-- 方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto -->
<!-- 当我们随意改变a的数量时，会发现他们始终是居中的 -->
<div class="box box1">
<a href="#">首页1</a>
<a href="#">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">下一页</a>
<a href="#">尾页</a>
</div>
</body>
</html>方案二：
将子元素转换为内联块状元素，给父元素设置text-align:center;
<style type="text/css">
.box2{
margin-top: 50px;
text-align: center;
}
.box2 a{
padding:3px 5px;
border: 1px solid blue;
margin:0 3px;
text-decoration: none;
color: #333;
font-size: 12px;
display: inline-block;
}
</style>
</head>
<body>
<!-- 网页中的分页效果，分页的页数不定，但是始终是居中的效果，如何实现？ -->
<!-- 方案二：将a转换为内联块状元素，给父元素设置text-align:center; -->
<div class="box box2">
<a href="#">首页</a><a href="#">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">下一页</a><a href="#">尾页</a>
</div>
</body>
</html>4、不定宽高的元素在屏幕窗口水平垂直都居中
<style type="text/css">
/*body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{
margin: 0;
padding: 0;
}*/
/*方案一：屏幕窗口的居中，使用固定定位，将四个方向的值全部设置为0，然后设置margin为auto，自动计算上下左右的margin值*/
.imgs{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
}
/*方案二*/
/*使用弹性盒的方式实现，首先给html，body设置宽度为100%，然后给body设置主轴，交叉轴对齐方式为center*/
/*html,body{
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}*/
/*方案三*/
/*使用css3中transform变形中的translate来实现水平垂直都居中*/
/*.imgs{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}*/
</style>
</head>
<body>
<img class="imgs" src="img/pic2.png"/>
</body>
</html>5、不定宽高元素在父元素中水平垂直都居中
<style type="text/css">
/*.father{
width: 800px;
height: 500px;
background: gray;
position: relative;
}*/
/*方案一：给父元素相对定位，给子元素绝对定位*/
/*.imgs{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}*/
/*方案二：使用css3的translate实现*/
/*.imgs{
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}*/
/*方案三：非父元素设置table-cell,将父元素转换为表格单元格形式*/
/*.father{
width: 800px;
height: 500px;
background: gray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.imgs{
vertical-align: bottom;
}*/
/*方案四：给img添加一个参照物span，并设置高度为100%*/
/*.father{
width: 800px;
height: 500px;
background: gray;
text-align: center;
}
.father span{
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.imgs{
vertical-align: middle;
}*/
/*方案五：使用弹性盒的方式实现*/
.father{
width: 800px;
height: 500px;
background: gray;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="father">
<img class="imgs" src="img/pic2.png"/>
<!-- <span></span> -->
</div>
</body>
</html>
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)