在HTML中，要实现两张图片平衡对齐，我们可以使用CSS的display: flex和align-items: center属性，这两个属性可以让元素成为Flex容器，从而使子元素沿着一条线(默认为交叉轴)排列，并且在交叉轴上居中对齐。
以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两图平衡对齐示例</title>
<style>
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 300px; /* 设置容器宽度 */
height: 200px; /* 设置容器高度 */
border: 1px solid black; /* 添加边框以便观察效果 */
}
</style>
</head>
<body>
<div class="container">
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
</div>
</body>
</html>
在这个示例中，我们创建了一个名为.container的CSS类，将display: flex,justify-content: center和align-items: center属性应用于该类，我们在HTML中创建一个包含两个图片的div,并将其类设置为container，这将使得这两个图片在容器内水平和垂直方向上都居中对齐。
相关问题与解答：
问题1:如何让图片保持原始宽高比？
解答1:可以通过设置img标签的width和height属性为百分比来实现，可以将宽度设置为50%,高度设置为auto，这样，图片将保持其原始宽高比，同时填充整个容器，代码如下：
<img src="image1.jpg" alt="图片1" style="width: 50%; height: auto;"> <img src="image2.jpg" alt="图片2" style="width: 50%; height: auto;">
问题2:如果想要改变图片之间的间距怎么办？
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/210693.html
微信扫一扫 