css设置div水平居中方法
2、在父级div元素里设置“text-align: center”样式,在子一级div元素里设置“display: inline-block”样式。子一级元素设置属性:display: inline-block;方式:父级元素设置属性:text-align: center;1、给div元素设置“margin: 0 auto”样式;方式:元素绑定属性:margin: 0 auto;注意:方法1:常用
·
CSS设置div水平居中的方法:
1、给div元素设置“margin: 0 auto”样式;
2、在父级div元素里设置“text-align: center”样式,在子一级div元素里设置“display: inline-block”样式。
1、外边距自适应
方式:元素绑定属性:margin: 0 auto;
<template>
<div class="div-parent">
<div class="div-child"></div>
</div>
</template>
<style lang="less" scoped>
.div-parent {
width: 400px;
height: 200px;
background-color: #aaa;
}
.div-child {
width: 100px;
height: 50px;
background-color: #007FFF;
margin: 0 auto;
}
<style>
展示效果:
注意:方法1:常用,适用于已知父级元素宽度的情况
2、行内块元素
方式:父级元素设置属性:text-align: center;
子一级元素设置属性:display: inline-block;
<template>
<div class="div-parent">
<div class="div-child"></div>
</div>
</template>
<style lang="less" scoped>
.div-parent {
width: 400px;
height: 200px;
background-color: #aaa;
text-align: center;
}
.div-child {
width: 100px;
height: 50px;
background-color: #007FFF;
display: inline-block;
}
<style>
展示效果:
更多推荐
已为社区贡献9条内容
所有评论(0)