文本和图片怎么设置水平居中
时间: 2024-04-14 16:29:34 浏览: 27
要将文本和图片水平居中,你可以使用CSS样式和Flex布局来实现。
首先,将`<h4>`标签和`<img>`标签包裹在一个父容器中,例如`<div>`标签。
然后,为父容器添加Flex布局,并使用`justify-content: center;`样式将其中的内容水平居中。
以下是修改后的代码示例:
```html
<el-col :span="6" :xs="24">
<div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
<h4>【第一步】</h4>
<img :src="wechatUrl" alt="Image" style="width: 200px; height: auto;">
<h4>扫描二维码关注公众平台。</h4>
<h4>【第二步】</h4>
<img :src="qrcodeUrl" alt="二维码" style="width: 200px; height: auto;">
<h4>关注公众平台后扫描二维码即可直接绑定微信。</h4>
</div>
</el-col>
```
在上面的示例中,我将父容器的样式设置为`display: flex; flex-direction: column; align-items: center; text-align: center;`,这会使其中的内容垂直排列,并且水平居中对齐。
注意:如果你希望只对文本进行水平居中,可以在`<h4>`标签上添加样式`margin: 0 auto;`,而不需要使用Flex布局。而对于图片,你可以使用`text-align: center;`样式来实现水平居中对齐。