CSS教程
CSS进阶

如何在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>
输出
如何在以下位置对齐图像CSS

使用float属性

CSS 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>
输出
如何在以下位置对齐图像CSS
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4