在不同的场景下，
ALIGN属性有不同的使用方法和作用：
### HTML 中图片元素的
ALIGN 属性
在 HTML 中，给图片元素设置
ALIGN 属性时，当
属性值为 left 或者 right 时，图片会左飘或右飘，类似于左浮动或者右浮动；当在图片后加上文字时，可利用这一特性进行图文混排。不过当
ALIGN 属性设置为 center 时，图片无法漂浮到中间 [^1]。
示例代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<
img src="example.jpg"
align="left" alt="示例图片">
<p>这里是一段文字，会围绕在图片的右侧...</p>
</body>
</html>
```
### PHP 中
ALIGN 标签
属性值
在 PHP 中涉及的 HTML 里，
ALIGN 是对齐
属性，其值可以是 left、center、right，分别表示靠左、中、右对齐。若要对齐的内容和容器大小相同，比如图片宽度和窗口相同，那么对齐效果无区别；否则会有不同的对齐效果 [^3]。
示例代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 300px; border: 1px solid black;">
<p
align="left">这段文字靠左对齐</p>
<p
align="center">这段文字居中对齐</p>
<p
align="right">这段文字靠右对齐</p>
</div>
</body>
</html>
```
### HTML 标记语言中的
ALIGN 属性
在 HTML 标记语言中，
ALIGN 属性还可以有 justify 和 inherit 等值。left 把文本排列到左边，默认值由浏览器决定；right 把文本排列到右边；center 把文本排列到中间；justify 实现两端对齐文本效果；inherit 规定应该从父元素继承 text-
align 属性的值 [^4]。
示例代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="text-
align: justify;">
<p>这是一段使用 justify 实现两端对齐的文本。这是一段使用 justify 实现两端对齐的文本。</p>
</div>
<div style="text-
align: inherit;">
<p>这段文本会继承父元素的 text-
align 属性</p>
</div>
</body>
</html>
```
### CSS 中 text-
align 的 justify
属性
在 CSS 中，使用 text-
align: justify 可以实现文本的两端对齐效果。可以通过设置元素的宽度、溢出处理等样式来更好地展示两端对齐的效果，还可以通过伪元素来辅助实现 [^5]。
示例代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
width: 100px;
float: left;
overflow: hidden;
text-
align: justify;
}
span:after {
content: '';
width: 100%;
display: inline-block;
height: 0;
}
</style>
</head>
<body>
<span>这是一段两端对齐的文本。</span>
</body>
</html>
```
### CSS 中的
align-content、justify-content、
align-items
属性
在 CSS 的弹性布局中，
align-content、justify-content、
align-items 等
属性也与对齐相关。例如
align-content 有 flex-start、flex-end、center、space-between、space-around 等取值，不同取值有不同的对齐效果；justify-content
属性也有多种取值来控制元素在主轴上的对齐方式 [^2]。
示例代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
height: 300px;
border: 1px solid black;
}
.flex-item {
width: 50px;
height: 50px;
background-color: lightblue;
margin: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>
```
本文介绍了多种图像对齐方式，包括AbsBottom、AbsMiddle、Baseline等，这些对齐方式用于实现图像与文本或其他元素的精确布局。
扫一扫
1948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
