本文旨在解决在使用 Flexbox 布局时，包含图像和文本的两个 Div 元素在 Apple 设备上出现对齐问题。通过分析问题代码，找出 CSS 类名定义错误，并提供正确的 CSS 样式，确保在所有设备和浏览器上都能实现期望的对齐效果。
在使用 Flexbox 布局时，对齐包含图像和文本的 Div 元素可能会遇到一些跨浏览器兼容性问题，尤其是在 Apple 设备上。以下将详细介绍如何解决这类问题。
问题分析
根据提供的信息，问题主要集中在以下几点：
- Apple 设备上的显示问题： 在 Apple 设备上，包含图像的 Div 占据了 100% 的宽度，导致文本 Div 被挤到下一行。
- CSS 类名定义错误： HTML 中定义的类名 site-logo-thumbnail 与 CSS 中定义的 .site - logo - thumbnail 不一致。
- 图像宽度限制： 无法移除 img 标签上的 width: 100% 属性，否则图像大小会产生问题。
解决方案
首先，也是最关键的一点，需要修正 CSS 类名定义错误。将 CSS 中的 .site - logo - thumbnail 修改为 .site-logo-thumbnail，确保与 HTML 中的类名一致。
.site-logo-thumbnail {
max-height: 48px;
display: flex;
justify-content: center;
align-items: center;
height: 48px;
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}其次，确保父容器使用了 Flexbox 布局，并且正确设置了对齐方式。以下是一个完整的示例代码，展示了如何使用 Flexbox 对齐包含图像和文本的 Div 元素：
@@##@@Your Display Name
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.mr-2 {
margin-right: 0.5rem; /* 8px */
}
.site-logo-thumbnail {
max-height: 48px;
display: flex; /* 确保内部元素也使用 Flexbox 布局 */
justify-content: center;
align-items: center;
height: 48px;
width: auto; /* 关键：允许图像根据内容自动调整宽度 */
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}
.font-weight-bolder {
font-weight: bolder;
}代码解释：
- .d-flex 和 .align-items-center 类用于设置 Flexbox 布局和垂直居中对齐。
- .mr-2 类用于在图像和文本之间添加一些右边距。
- .site-logo-thumbnail 类用于限制图像的最大高度，并使用 object-fit: contain 属性来确保图像在容器内完整显示，同时保持宽高比。
- width: auto 在 .site-logo-thumbnail 类中允许图像根据自身内容自动调整宽度，避免占据 100% 的宽度。
注意事项：
- 确保 HTML 和 CSS 中的类名完全一致，避免因拼写错误导致样式不生效。
- 根据实际需求调整图像容器的高度和宽度，以及文本容器的样式。
- 如果仍然存在问题，可以尝试使用浏览器的开发者工具来检查元素的样式和布局，以便更好地定位问题所在。
- object-fit: contain 属性在一些旧版本的浏览器中可能不支持，需要考虑兼容性问题。
总结
通过修正 CSS 类名定义错误，并正确使用 Flexbox 布局，可以有效地解决包含图像和文本的 Div 元素在 Apple 设备上的对齐问题。 关键在于确保类名一致，并合理设置图像容器的宽度，使其能够根据内容自动调整。
