Поместите изображение в центр нижней границы с помощью CSS

Все объяснено в заголовке этого сообщения. Я пытаюсь поместить изображение 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>

Ответ 1

Чтобы добиться того, чтобы он находился точно в середине границы, вам нужно включить границу с изображением, наследуя его и сделав его невидимым. Таким образом, вы можете "вычислить" его.

Смотрите эту скрипту для эффекта. В этом 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% сверху);

Затем, чтобы заставить его двигаться вместе с рамкой, я унаследовал только верхнюю часть и сделал ее невидимой.

Ответ 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>

Ответ 3

Добавить img в 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%;
}

Надеюсь, что это поможет!

Ответ 4

Поместите изображение внутри оранжевого div и добавьте text-align:center в div

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

а затем установите margin-top в img. Проверьте Fiddle