掌握CSS：终极技巧大集合

发表时间: 2024-04-19 14:25

水平居中

文本居中

text-align: center;

块元素居中方法

第一种方法

html代码：

<body><div>我是定宽块状元素, Hello ,我要水平居中显示。</div></body>

css代码：

<style>div{    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/    width:500px;/*定宽*/    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>

也可以写成：

margin-left:auto;margin-right:auto;

注意：元素的"上下margin"是可以随意设置的。这种水平居中的方法两个2个条件缺一不可

第二种方法

html代码：

<body><div>我是定宽块状元素, hello ,我要水平居中显示。</div></body>

css代码：

<style>div{    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/    width:500px;/*定宽*/    position:absoute;    left:50px;    margin-left:-25px;}</style>

文本缩进

用text-indent代替padding缩进, 优点在于不会改变容器的宽度

掌握CSS：终极技巧大集合

热门阅读

推荐阅读