尝试让三个 Div 与下面另外三个 Div 正确对齐

问题描述 投票：0回答：1

我试图在同一行中获取三个 div，作为其下方以文本为中心的三个图像的标题。我可以左右移动来工作，但无论我怎么尝试，中间的那个都无法工作。

我尝试了很多不同的方法，例如调整边距和填充值、更改容器的排列以及将图像移动到单独的 div。这是我得到的最接近的：

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="fav.ico">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Version Log</title>
    <style>
    body {
        background-color: #FFFDD0;
    }
    header {
        text-align: center;
    }
    img {
        border: 2px black groove;
        width: 200px;
        height: 150px;
        padding: 0px;
        display: block;
    }
    a {
        text-decoration: none;
        color: black;
    }
    div {
        text-align: center;
        display: absolute;
        margin: 0px;
        padding: 0px;
    }
    h3 {
        clear: none;
        display: inline;
    }
    </style>
</head>
<body>
    <header>
        <h1>Brent Tracker Version Log</h1>
    </header>
    <article style="text-align: center;">
        <div style="float: left"><h3>Version 1</h3>
            <a href=""> <img src=""></a>
        </div>
        <div style="margin: auto;">
            <h3>Version 2</h3>
            <a href=""> <img src=""></a>
        </div>
    </article>
</body>
</html>

我知道我可能缺少一个非常简单的解决方案。我对编码还很陌生。

html css layout
1个回答
0
投票

要将中间 div 及其图像居中，您可以使用 flexbox。您可以通过以下方式修改代码来实现此目的：

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="fav.ico">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Version Log</title>
    <style>
    body {
        background-color: #FFFDD0;
    }
    header {
        text-align: center;
    }
    img {
        border: 2px black groove;
        width: 200px;
        height: 150px;
        padding: 0px;
        display: block;
        margin: auto; /* Centering the image */
    }
    a {
        text-decoration: none;
        color: black;
    }
    .container {
        display: flex;
        justify-content: space-around; /* Adjust as needed */
    }
    .container > div {
        text-align: center;
    }
    h3 {
        clear: none;
        display: inline;
    }
    </style>
</head>
<body>
    <header>
        <h1>Brent Tracker Version Log</h1>
    </header>
    <article style="text-align: center;">
        <div class="container">
            <div><h3>Version 1</h3>
                <a href=""> <img src=""></a>
            </div>
            <div><h3>Version 2</h3>
                <a href=""> <img src=""></a>
            </div>
            <div><h3>Version 3</h3>
                <a href=""> <img src=""></a>
            </div>
        </div>
    </article>
</body>
</html>

在此代码中：

我在所有包含标题和图像的 div 周围添加了一个容器 div。 我使用 flexbox 作为容器来水平排列 div 并均匀地间隔它们。 我通过应用 margin: auto;

将图像置于各自的 div 中
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.