HTML5 文字内容居中左对齐
在网页设计中，文字内容的对齐方式是非常重要的一环，能够直接影响到网页的整体美观和用户体验。在 HTML5 中，我们可以通过一些简单的代码来实现文字内容的居中和左对齐。
文字内容居中
要让文字内容居中显示，我们可以使用text-align属性。这个属性可以应用于块级元素和内联元素上，通过设置其值为center，我们就可以让文字内容在其父元素中水平居中显示。
下面是一个简单的示例代码，演示了如何让文字内容居中显示：
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="center">
Welcome to our website
<p>Here you can find all the information you need.</p>
</div>
</body>
</html>
在这段代码中，我们给包裹文字内容的<div>元素添加了一个类名.center，并在样式表中设置了text-align: center;。这样，<h1>和<p>元素中的文字内容就会在页面中水平居中显示了。
文字内容左对齐
与文字内容居中不同的是，有时候我们需要让文字内容左对齐显示。在 HTML5 中，文字内容默认就是左对齐的，但如果需要显式地设置左对齐，我们可以使用text-align: left;属性。
下面是一个示例代码，演示了如何让文字内容左对齐显示：
<!DOCTYPE html>
<html>
<head>
<style>
.left-align {
text-align: left;
}
</style>
</head>
<body>
<div class="left-align">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
在这段代码中，我们给包裹文字内容的<div>元素添加了一个类名.left-align，并在样式表中设置了text-align: left;。这样，<h2>和<p>元素中的文字内容就会在页面中左对齐显示了。
序列图示例
接下来，让我们通过一个序列图示例，来展示文字内容居中和左对齐的应用过程。下面是一个使用 Mermaid 语法绘制的序列图：
sequenceDiagram
participant User
participant Browser
User -> Browser: 输入网页地址
Browser -> Browser: 下载 HTML 页面
Browser -> Browser: 解析 CSS 样式
Browser -> Browser: 渲染页面
User -> Browser: 查看居中文字内容
User -> Browser: 查看左对齐文字内容
在这个序列图中，用户首先输入网页地址，浏览器下载 HTML 页面并解析 CSS 样式，最终渲染出页面。用户可以通过浏览器查看居中文字内容和左对齐文字内容。
旅行图示例
最后，让我们通过一个旅行图示例，来进一步演示文字内容居中和左对齐的应用过程。下面是一个使用 Mermaid 语法绘制的旅行图：
journey
title 文字内容对齐之旅
section 居中文字内容
Browser: 下载 HTML 页面
Browser: 解析 CSS 样式
Browser: 渲染页面
User: 查看居中文字内容
section 左对齐文字内容
Browser: 下载 HTML 页面
Browser: 解析 CSS 样式
Browser: 渲染页面
User: 查看左对齐文字内容
在这个旅行图中，我们可以清晰地看到文字内容对齐之旅的整个过程，包括下载 HTML 页面、解析 CSS 样式、渲染页面和用户查看居中和左对齐文字内容的过程。
通过以上示例代码和图示，我们可以
