CSS入门知识-图片水平对齐技巧

Posted 2023-03-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS入门知识-图片水平对齐技巧相关的知识，希望对你有一定的参考价值。

参考技术A

CSS入门知识-图片水平对齐技巧

　　在CSS中，图片怎么水平对齐，有哪些技巧呢？我们一起来学习一下吧！

　　一、图片水平对齐text-align

　　在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住，text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。

　　语法：

　　text-align:属性值;

　　说明：

　　text-align属性取值如下表：

　　表1 text-align属性

　　<!DOCTYPE html>

　　<head>

　　<title>图片水平对齐</title>

　　width:300px;

　　height:80px;

　　border:1px solid gray;

　　.p_img1text-align:left;

　　.p_img2text-align:center;

　　.p_img3text-align:right;

　　imgwidth:60px;height:60px;

　　</style>

　　</head>

　　<body>

　　</p>

　　</p>

　　</p>

　　</body>

　　</html>

　　在浏览器预览效果如下：

　　分析：

　　很多人都以为设置图片水平对齐是在img标签设置，其实这是错误的。大家记住，图片是要在父元素中进行水平对齐的。在这个例子中，img元素的父元素是p，img元素是相对于p元素进行水平对齐的。因此要想对图片进行水平对齐，就要在父元素（p元素）中设置text-align属性。

;

以上是关于CSS入门知识-图片水平对齐技巧的主要内容，如果未能解决你的问题，请参考以下文章