如何在CSS中对齐图像？
图像是任何Web应用程序的重要组成部分。通常不建议在Web应用程序中包含很多图像，但是在需要的地方使用它们非常重要。
CSS 帮助我们控制Web应用程序中图像的显示。
对齐图像意味着定位图像位于中间，左侧和右侧。我们可以使用
float 属性和
text-align 属性来对齐图像。
如果图像位于div元素中，则可以使用
text-align 属性在div中对齐图像。
示例
在此示例中，我们将对齐图像通过使用
text-align 属性。图像位于div元素中。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
}
img{
height: 250px;
width: 250px;
}
#left {
text-align: left;
}
#center {
text-align: center;
}
#right{
text-align: right;
}</style>
</head>
<body>
<div id ="left">
<img src="lion.png">
</div>
<div id ="center">
<img src="lion.png">
</div>
<div id ="right">
<img src="lion.png">
</div>
</body>
</html>
输出
使用float属性
元素仅水平浮动。因此，只能将元素向左或向右浮动，而不能向上或向下浮动。浮动元素可以尽可能向左或向右移动。简单来说，这意味着浮动元素可以显示在最左侧或最右侧。
示例
<!DOCTYPE html>
<html>
<head>
<style>
img{
height: 200px;
width: 250px;
border: 7px ridge blue;
}
#left{
float: left;
}
#right{
float: right;
}</style>
</head>
<body>
<img src="lion.png" id ="left">
<img src="lion.png" id="right">
</body>
</html>
输出
