本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

html

 <p id="pic">        @@##@@ </p>

一、（最简单）文本属性对齐text-align

text-align控制元素中文本行的对齐方式。可以在img设一个父辈的p，这样img就可以是p的文本，然后用text-align修改p属性。（在父辈元素添加属性）

立即学习“前端免费学习笔记（深入）”；

注意：子元素必须是inline或inline-block；如果子元素也是p的话，需要给子元素设置display：inline/inline-block. 这里子元素img是inline所以省略这一步。该方法适用于inline元素上。比如img的居中

css

#pic {    text-align: center;   /*表示p的子元素居中*/}

二、巧用margin

css

img {    display: block;        width: 100px;    margin: 0 auto;}