html - 如何将图像居中放置在 2 个 div 上

Question

我正在努力取得一些成就，但徒劳无功。我把图片放在下面，它值一千字。

基本上，我试图将位于 div 2 中的 div 3 准确地置于 div 1 和 2 之间，以实现以下结果

现在，这是我的 HTML 和 CSS 代码:

HTML

<div id="container">
    <div id="leftSide">
        <!-- 1. -->
    </div>

    <div id="rightSide">
        <!-- 2. -->
        <div id="circle">
            <!-- 3. Contains the image -->
        </div>
    </div>
</div>

CSS

#container{
    width: 600px;
    float: left;
    padding: 0;
    margin: 0 auto;
}

#leftSide{
    width: 300px;
    height: 300px;
    float:left;
    background-color: blue;
}

#rightSide{
    width: 300px;
    height: 300px;
    float:left
    background-color: red;
}

#circle{
    width: 100px;
    height: 100px;
    margin-left: 30px;
    background-color: black;
}

我不清楚如何实现它。任何帮助表示赞赏。谢谢。

Answer 1

你总是可以尝试使用 CSS position property ？

CSS

#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position:relative;
}

#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}

#rightSide{
width: 300px;
height: 300px;
float:left
background-color: red;
}

#circle{
width: 100px;
height: 100px;
margin-left: 30px;
background-color: black;
position:absolute;
top:/* VALUE GOES HERE */;
left:/* VALUE GOES HERE */;
}

top:50px; drop 元素向下 50px

left:50px; 将元素向右 50px

移动