我想水平居中在另一個DIV中有一個圖像的DIV中。我可以讓它與父\子DIV一起工作，但是一旦我添加圖像，事情就會變得瘋狂。DIV中的中心DIV與圖像

這是我試過的。理想情況下，我希望box2能夠集中在外部DIV \圖像的底部，但是在圖像的頂部，無論圖像的大小如何。

見例如http://i60.tinypic.com/mbmqzr.jpg

建議？

CSS

#box1{ 
    position:relative; 
    display:inline-block; 
    width: 200px; 
    height: 200px; 
} 

#box2{ 
    width:50px; 
    margin: 0 auto; 
    background-color: yellow; 
}

HTML

<div id="box1"> 
<img src="http://i44.tinypic.com/2j4akqb.jpg"/> 
    <div id="box2">box</div> 
</div>

來源

2015-04-04 David Angel

我想我應該澄清我的意思，DIV需要位於圖像之上。請參閱編輯 – 2015-04-05 17:46:54

這裏有兩個簡單的方法來將div集中在div中，垂直，水平或兩者（純CSS）：http://stackoverflow.com/a/31977476/3597276 – 2015-08-20 15:24:41

因爲BOX1是外包裝盒，你可以添加text-align屬性，以便＃BOX2將繼承它。你的圖片也大於200px;你可以改變239px的寬度; jsfiddle

#box1{ 
    position:relative; 
    display:inline-block; 
    width: 239px; 
    height: 200px; 
    text-align:center; 

} 

#box2{ 
    background-color: yellow; 
}

，或者你可以設置寬度爲200像素的圖像

jsfiddle

#box1{ 
    position:relative; 
    display:inline-block; 
    height: 200px; 
    text-align:center; 

} 

#box1 img{ 
width:200px 
} 


#box2{ 
    background-color: yellow; 
}

來源

2015-04-04 03:21:12

Live Demo

試試這個

HTML

<div id="box1"> 
    <img src="http://i44.tinypic.com/2j4akqb.jpg"/> 
    <div id="box2">box</div> 

</div>

CSS

#box1{ 
    position:relative; 
    display:inline-block; 
    width: auto; 
    height: 200px; 
    background-color:#fff; 

} 

#box2{ 
    width:50px; 
    text-align:center; 
    position:relative; 
    bottom:0%; 
    float:bottom; 
    margin: 0 auto; 
    background-color: yellow; 
}

來源

2015-04-04 03:28:36 Alupotha

這是你的解決方案？

#box1 { 
    position:relative; 
    display:table; 
    width: 200px; 
    height: 200px; 
} 

img { 
    position: absolute; 
    z-index: -2; 
    width: 100%; 
} 

#box2 { 
    width:50px; 
    margin: 0 auto; 
    left: 0%; 
    right: 0%; 
    bottom: 0%; 
    background-color: yellow; 
    z-index: 100; 
    position:absolute; 
}

工作示例： https://jsfiddle.net/ba5z1zm3/2/

來源

2015-04-04 15:05:56 cuddlecheek

試試這個。我所做的只是在外部div上取出寬度（如果同時設置了這兩個寬度，則最終的尺寸可能會因img而異）。然後將img設置爲高度100％。不要同時設置......只有一個和另一個會遵循img的保持比例。後來終於在底部的div我只是把它絕對爲0的底部和右側的d左0，然後保證金自動使其中心

https://jsfiddle.net/carinlynchin/uz0L5oow/10/

<div id="box1"> 
    <img src="http://i44.tinypic.com/2j4akqb.jpg"/> 
    <div id="box2">box</div> 
</div>

CSS：

#box1{ 
    position:relative; 
    display:inline-block; 
    height: 200px; 
} 

img { 
    height: 100%; 
} 

#box2{ 
    width:50px; 
    background-color: yellow; 
    position: absolute; 
    bottom:0;left:0; right:0; 
    margin:auto; 
}

來源

2015-04-18 05:23:36 carinlynchin

DIV中的中心DIV與圖像

回答

Live Demo

相關問題