我试图让三个div在同一行作为标题的三个图像下面是中心的文本.我可以左右工作,但中间的那个就是不工作,不管我怎么努力.

我try 了很多不同的方法,比如混乱marginpadding的值,改变容器的排列,以及将图像移动到单独的div.这是我最接近的一次了

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;
}
    <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="https://picsum.photos/200/300?grayscale"></a>
        </div>
        <div style="margin: auto;">
            <h3>Version 2</h3>
            <a href=""> <img src="https://picsum.photos/seed/picsum/200/300"></a>
        </div>
    </article>

我知道我可能遗漏了一个非常简单的解决方案.我对编程还是个新手.

推荐答案

要使中间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,并均匀地将它们隔开. 我通过应用空白区:Auto使图像在各自的div中居中;

Html相关问答推荐

为什么html复选框总是具有只读属性?

值更新时旋转数字动画

html中背景色的全单元格R中的Rmarkdown表

如何获得一个背景图像,不是模糊的内部容器,但模糊的外部'

使用网格时图像溢出容器高度

垂直页眉,每行只显示一个使用css的字母

需要关于HTML的建议

图像不在HTML文件中显示

Div中的图像问题-(TailWind CSS中的网格)

水平卷轴的内容保持堆叠

更改Angular 为17的material Select 字段的高度?

SVG';COLOR&39;属性不优先于通用css';COLOR&39;属性

顶部有文字的图像的悬停效果

如何正确地嵌套Flexbox

我如何设置括号的样式,使它们不会挂在旁边的其他字符下面

需要禁用聚焦输入的工具提示(jquery)

如何向上移动图像并溢出图像的一部分而另一部分不溢出

当另一个 div 的高度改变或执行其内容的换行时,将 flex 方向更改为列

如何使文本显示在页眉/页脚之外?

用 flexbox 和 overflow 覆盖