一列排列在css中居中后，无法左侧对齐
2017-07-04 本文已影响0人
馥馥福2016
问题详述：
在html中输入一列排列后，css中对该段内容进行居中处理，比如文档目录居中左对齐功能效果，但却失败了，只能居中无法左侧开头对齐，使得页面浏览效果很差。
问题现场：
<!doctype html>
<html lang="zh-cn">
<head>
<title>居中左对齐问题</title>
<meta charset="utf-8">
<style>
div{
text-align:center;
}
</style>
</head>
<body>
<div>
<p>我是目录第一行</p>
<p>我可能是目录第二行吧</p>
<p>我就是目录第三行</p>
<p>我一定是第四行啊啊啊啊</p>
</div>
</body>
</html>
图2.jpg
问题解决：
对text-align功能了解错误，以为对块级元素div进行居中就能左对齐，但这是构造文本，对文本本身进行每行居中，由于每行字数不一样所以居中不左对齐。
方法：舍弃text-align，用margin-left对块级元素进行整体效果。
延伸：块级元素在css颜色作用下，子元素不继承。
