如何使用css脚本将元素水平居中对齐呢?


摘要:
下文讲述在css中将元素居中对齐的方法,如下所示:


实现思路:
要实现当前元素相对父级水平居中,可使用
margin:auto(及左右边距设置为auto)属性达到此目的
————————————————–
注意事项:
父级元素必须设置width属性,否则居中起不到效果(因为父级元素占用宽度过小)

例:
元素相对父级元素居中举例演示

   <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
.center {
    margin: auto;
    width: 50%;
    border: 3px solid black;
    padding: 10px;
}
</style>
</head>
<body>

<h2>元素相对父级居中对齐</h2>
<p>下文的元素将水平居中</p>

<div class="center">
  <p><b>此元素将水平居中显示 </b> </p>
</div>

</body>
</html>
 
css_margin_auto水平居中对齐的举例分享

css_margin_auto水平居中对齐的举例分享