使用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，边框图像和东西，但没有任何效果。

Answer 1

要实现它正好位于边框中间的效果，您必须通过继承它来强制包含边框，并使其不可见。像这样，你可以计算＆＃39;用它。

请参阅this 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％）;

然后为了使它与边界一起移动，我只在顶部继承，并使其不可见。

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>

如果你有一个relative父母，你可以使用position:absolute;

操纵一个内在孩子的位置

Answer 3

在html中添加img

<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%;
}

希望有所帮助！

Answer 4

将图像放在橙色div中并将text-align:center添加到div

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

然后将margin-top设置为img。请检查此Fiddle