关于CSS水平对齐示例介绍，我来提供一份完整攻略。

CSS水平对齐示例介绍

1. text-align属性

text-align属性可以用于设置文本或行内元素在其包含块中的水平对齐方式。其属性值可以为left、right、center和justify。

示例1

以下是一个简单的示例，用于展示text-align属性：

<div class="text-center">
  <p>这是一段文本</p>
  <img src="example.jpg" alt="示例图片">
</div>

<style>
.text-center {
  text-align: center;
}
</style>

在这个示例中，我们将text-center类的text-align属性设置为center，从而使包含该类的元素内的所有文本和行内元素水平居中。

2. margin属性

margin属性可以用于设置块级元素的边距。当设置左右边距为auto时，块级元素会自动居中。

示例2

以下是一个使用margin属性实现水平居中的示例：

<div class="container">
  <p>这是一段文本</p>
  <img src="example.jpg" alt="示例图片">
</div>

<style>
.container {
  width: 80%;
  margin: 0 auto;
}
</style>

在这个示例中，我们将.container元素的宽度设置为80%，并将其左右边距设置为auto，从而使其水平居中。

以上是关于CSS水平对齐的两个示例介绍，希望对你有所帮助。