HTML如何实现图片和文本居中对齐？新手布局实操疑问

首先说明你现有代码的两个可优化点：

• CSS中不存在horizontal-align属性，属于无效代码可以直接删除
• <link>样式引入标签建议放到<head>标签内部，符合HTML语法规范，避免浏览器解析异常
• <center>属于已废弃的HTML标签，建议用CSS实现居中效果，兼容性更好

第一步：调整HTML对应区域结构 #

将需要并排显示的图片和文本放到同一个父容器内，方便统一控制布局：

<html>
<head>
<title>CSS_externo</title>
<link rel="stylesheet" type="text/css" href="cssestilo1.css">
</head>
<body>
<hr align="center" color="cyanblue" size="20" width="10%"/>
<hr align="center" color="cyan" size="16" width="8%"/>
<hr align="center" color="cyan" size="16" width="6%"/>
<hr align="center" color="cyan" size="16" width="4%"/>
<hr align="center" color="cyan" size="16" width="2%"/>
<hr align="center" color="cyan" size="16" width="4%"/>
<hr align="center" color="cyan" size="16" width="6%"/>
<hr align="center" color="cyan" size="16" width="8%"/>
<hr align="center" color="cyanblue" size="20" width="10%"/>
<h1>NO_________________TIME</h1><br/>
<div class="media-wrap">
  <p>Can it be?</p>
  <div class="img-text-group">
    <img src="flybat.gif" border="5">
    <p class="test">nobody here</p>
  </div>
</div>
</body>
</html>

第二步：修改CSS样式 #

使用Flex布局实现「整体居中+图片文本并排垂直居中」的效果：

body {
  background-image: url("test.jpg"); 
  color: red;
}
h1 {
  text-align: center;
}
img {
  vertical-align: middle;
  width: 100px;
  border-radius: 60px;
}
/* 外层容器实现整体内容居中 */
.media-wrap {
  text-align: center;
}
/* 图片文本组实现横向排列+垂直居中 */
.img-text-group {
  display: inline-flex;
  align-items: center;
  gap: 16px; /* 可自行调整图片和文本的间距数值 */
}
/* 清除p标签默认外边距，避免对齐偏移 */
.test {
  margin: 0;
}

效果说明 #

• inline-flex让图片和文本的组合块保持行内特性，配合父容器的text-align: center即可实现整体在页面居中
• align-items: center保证了图片和右侧文本在垂直方向上居中对齐
• 所有样式符合现代HTML/CSS规范，兼容主流浏览器

内容的提问来源于stack exchange，提问作者Senso comum