使用CSS将图片放置于底部中心位置

Question

在这篇帖子的标题中已经解释了一切。我正在尝试将一个PNG图像放在一个div元素的底部中心边框上。

.content_block {
  border: ridge;
  border-width: 1px;
  border-color: #969696;
  height: 200px;
  width: 200px;
}
.content_block.orange {
  background-image: linear-gradient(#FBB03B, #FF9933);
}

<div class="content_block orange"></div>

这是我试图实现的效果：

我在网上搜索了使用CSS、border-image等方法来实现，但都没有成功。

- Mathemagician

Answer 1

为了实现图片恰好在边框的中心位置，您需要通过继承边框并将其设为不可见来将边框包含在图片内部。这样，您就可以使用它进行“计算”。

请参见此处的 Fiddle 以查看效果。 在这个Fiddle中，我创建了一个伪元素，其背景图像是播放按钮。

CSS代码如下：

div::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 30px;
    height: 30px;
    background-image: url('http://www.iconsdb.com/icons/preview/gray/video-play-3-xxl.png');
    background-size: cover;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    border-top: inherit;
    border-top-color: transparent;
}

我把它放在绝对底部并距左边50%的位置。然后使用transform属性，将其移动到这些点（左边距离50%，顶部距离100%）的中心位置；

接下来为了让它随着边框移动，我只继承了顶部，并使它不可见。

- Gust van de Wal

---

将HTML添加进去，因为仅使用CSS（没有解释要使用哪个元素）很难实现。我不得不去JSFiddle理解它。也许尝试使用Stackoverflow代码片段？ - Ben Aubin

我已经编辑了我的答案，使其完全不需要HTML即可理解。 - Gust van de Wal

Answer 2

.content-block {
  position: relative;
  width: 200px; height: 100px;
  border: 1px solid #f0f;
}
.content-block img{
  position: absolute;
  left: 50%; bottom: 0;
  width: 50px; height: 50px; margin: -25px;
}

<div class="content-block">
  <img src="http://placehold.it/50x50" alt="">
</div>

如果您有一个相对定位的父元素，您可以使用 position:absolute; 来操作内部子元素的位置。

- Roko C. Buljan

---

由于 OP 的 HTML 代码中没有 img 元素，我相信他希望在不修改 HTML 的情况下实现这一点。 - Michał Perłakowski

@Gothdo ж•…ж„Ҹзҡ„гҖӮ жҲ‘жІЎжңүдҪҝз”Ё:afterе’Ң:beforeдјӘе…ғзҙ пјҢеӣ дёәOPжҳҺжҳҫдҪҝз”ЁдәҶдёҖдёӘUIдәӨдә’жҢүй’®гҖӮд»…дҪҝз”ЁJSи§ҰеҸ‘иҜҘдјӘе…ғзҙ дёҠзҡ„дәӢ件пјҹдёҚеҸҜиғҪпјҲе—ҜпјҢйҖҡиҝҮи·ҹиёӘйј ж ҮдҪҚзҪ®еқҗж Үзӯүж–№ејҸжҳҜеҸҜиғҪзҡ„пјүгҖӮдҪҝз”ЁжҺҘеҸ—зҡ„зӯ”жЎҲпјҢдҪ еҸӘиғҪзӣ‘еҗ¬е·ЁеӨ§зҲ¶е…ғзҙ дёҠзҡ„зӮ№еҮ»гҖӮ - Roko C. Buljan

你可以猜测，但是OP实际上没有提到任何相关内容。 - Michał Perłakowski

Answer 3

在HTML中添加一张图片。

<div class="content_block orange">
       <img class='element' src='https://cdn0.iconfinder.com/data/icons/form-elements-kit/100/checked-green-rounded-01-128.png'/>
</div>

将此添加到您的 CSS 中。

 .element { width:32px;
                height:33px;
                display:block;
                background-color:grey;
                margin-left:auto;
                margin-right:auto;
                margin-top:185px;
                border-radius:100%;
}

希望能有所帮助！

- incalite

---

是的，但当您实际需要放置一个元素或其他内容时会发生什么？这是一个例子！ - incalite

如果说什么的话，这应该是一张图片（img），而不是一个div。语义上的确很重要。 - Michał Perłakowski

Answer 4

将一张图片放在橙色的 div 中，并给该 div 添加 text-align:center。

<div class="content_block orange">
  <img src="" height="30" width="30">
</div>

然后将margin-top设置为img。查看Fiddle。

- eylay