需要一段HTML CSS代码 让一张图片居中显示在下面再显示两个按钮也要居中
以下是一个示例代码,其中包含了一个居中显示的图片和两个居中显示的按钮:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>居中显示图片和按钮</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
.btn-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.btn {
margin: 0 10px;
padding: 10px 20px;
background-color: #eaeaea;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<img src="your-image.jpg" alt="Image">
<div class="btn-container">
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
</div>
</body>
</html>
请将代码中的your-image.jpg替换为您要显示的图片的路径。
原文地址: https://www.cveoy.top/t/topic/i3FK 著作权归作者所有。请勿转载和采集!