以下是一个示例代码,其中包含了一个居中显示的图片和两个居中显示的按钮:

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替换为您要显示的图片的路径。

需要一段HTML CSS代码 让一张图片居中显示在下面再显示两个按钮也要居中

原文地址: https://www.cveoy.top/t/topic/i3FK 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录