我不能在圖像上居中div

enter image description here我想把div放在圖像的中心，我嘗試將容器的相對位置和元素放置到絕對位置，但沒有工作。下面的代碼顯示了我所做的直到現在。圖像是全尺寸背景，容器應該居中放置。我不能在圖像上居中div

.circle123{ 
 
    position: relative; 
 
    float: none; 
 
    width: 600px; 
 
    height: 200px; 
 
    top: 0; 
 
    margin-right:auto; 
 
    margin-left:auto; 
 
    text-align: center; 
 
    border: 1px solid black; 
 

 
} 
 
#circle1{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 10px; 
 
    padding: auto; 
 
    border-radius: 50%; 
 
    background-color: rgba(50,205,50, 0.75); 
 
} 
 
#circle2{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 10px; 
 
    padding: auto; 
 
    border-radius: 50%; 
 
    background-color:rgba(135,206,235, 0.75); 
 
} 
 
#circle3{ 
 
    position:absolute ; 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 10px; 
 
    padding: auto; 
 
    border-radius: 50%; 
 
    background-color: rgba(220,20,60, 0.55); 
 
} 
 
.back-bar{ 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(image.jpg); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover;  
 
    background-position: center center; 
 

 
}

<div class="back-bar"></div> 
 
<div class="circle123"> 
 
<div id="circle1"><h2>1<h2></div> 
 
<div id="circle2"><h2>2<h2></div> 
 
<div id="circle3"><h2>3<h2></div> 
 
</div> 
 
</div>

來源

2016-10-09 Xhimi Pg

無法看到圖像，無法真正關注你，你真正需要的。你能提供一個更簡約的例子嗎？ – markusthoemmes

你想做什麼？將圓形放在盒子中央？如從左到右或在一個地方的所有圈子，在div的中間？在cirlce內部的h2中心？請多解釋一下。 – Varin

我添加了一張照片，我想中心的容器.circle123在圖像的中心 –

首先，是在HTML代碼中的問題，最後</div>密切什麼。要以position : absolute爲中心容器，具有該元素的容器應位於position : relative上。之後，你可以用position : absolute與您的中心元素：

`position : absolute; 
top : 0; 
bottom : 0; 
left : 0; 
right : 0; 
margin: auto;`

來源

2016-10-09 15:43:36 Yapoto

你的HTML有問題，<h2>沒有關閉，你有在底部的額外</div>。

要居中每個圓圈的容器，將它添加到每圈：

margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0;

這裏的jsfiddle：https://jsfiddle.net/jLodgoc7/

來源

2016-10-09 15:45:57 Varin

什麼是h2，我怎麼能居中它？ –

@XhimiPg爲每個圓圈代替'display：inline-block' add 'display：flex; align-items：center; justify-content：center;' jsfiddle here：https://jsfiddle.net/jLodgoc7/1/ – Varin

@XhimiPg這樣做的工作？ – Varin

我不明白你想要什麼，但我相信你想將內容在水平和垂直方向放置在以圖像爲背景的div上。所以，在這裏，你有。

.image { 
 
\t width: 300px; 
 
\t height: 300px; 
 
\t position: relative; 
 
\t background: url('https://placehold.it/300x300/?text=This is your image'); 
 
} 
 

 
.image > .centered { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
}

<div class="image"> 
 
\t <div class="centered">This is at center</div> 
 
</div>

來源

2016-10-09 15:50:16 nanilab

第一步：移除的CSS '位置'。

第二步：爲cricle1添加float：right並添加float：從左到 cricle3。

終於在CSS中添加這種風格（DIV^h {}）：

#circle1{ 
    display: inline-block; 
    height: 150px; 
    width: 150px; 
    margin: 10px; 
    padding: auto; 
    border-radius: 50%; 
    background-color: rgba(50,205,50, 0.75); 
    float: right; 
} 
#circle2{ 
    display: inline-block; 
    height: 150px; 
    width: 150px; 
    margin: 10px; 
    padding: auto; 
    border-radius: 50%; 
    background-color:rgba(135,206,235, 0.75); 
    float: none; 
} 
#circle3{ 
    display: inline-block; 
    height: 150px; 
    width: 150px; 
    margin: 10px; 
    padding: auto; 
    border-radius: 50%; 
    background-color: rgba(220,20,60, 0.55); 
    float: left; 
} 

div h { 
     text-align: center; 
     vertical-align: middle; 
}

來源

2016-10-09 15:54:01

我不能在圖像上居中div

回答

相關問題