在HTML5中，将文字和图片居中显示是一个常见的需求，本文将详细介绍如何实现这一目标，以及一些常见问题的解答。
我们可以通过使用HTML5的<div>标签来创建一个容器，然后将文字和图片放入其中，接着，我们可以使用CSS来设置容器的样式，使其居中显示。
以下是一个简单的示例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>标题</h1>
<img src="image.jpg" alt="图片描述">
<p>这里是一些文字描述。</p>
</div>
</body>
</html>
CSS代码（style.css）：
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
text-align: center;
}
.container h1 {
margin-bottom: 20px;
}
.container img {
max-width: 100%;
height: auto;
}
.container p {
margin-top: 20px;
}
在这个示例中，我们使用了一个名为.container的类来设置容器的样式。display: flex和flex-direction: column属性使得容器内的元素垂直排列。justify-content: center和align-items: center属性使得容器内的元素在水平和垂直方向上都居中显示。height: 100vh属性使得容器的高度占满整个视口。
接下来，我们来回答一些常见问题：
Q1: 如何调整图片的大小？
A1: 可以通过设置<img>标签的width和height属性来调整图片的大小，还可以使用CSS的max-width和height属性来实现响应式设计，使图片在不同屏幕尺寸下都能保持良好的显示效果。
Q2: 如何在不同屏幕尺寸下保持文字和图片的居中显示？
A2: 使用媒体查询（Media Queries）可以为不同屏幕尺寸设置不同的样式，可以为小屏幕设置较小的字体大小，为大屏幕设置较大的字体大小，使用flexbox布局可以确保元素在不同屏幕尺寸下都能保持良好的居中显示效果。
Q3: 如何在图片下方添加文字描述？
A3: 可以在<img>标签下方添加一个<p>标签，并将文字描述放入其中，在CSS中，可以通过设置margin-top属性来调整文字描述与图片之间的间距，还可以使用text-align: center属性来使文字描述居中显示。
通过以上方法，你可以轻松地在HTML5页面中实现文字和图片的居中显示。
