Question

我想在主图像的中央显示播放按钮，并希望它在不同屏幕尺寸的中心自动对齐。

我尝试了不同的东西而且放弃了，我不确定我是否使用了错误的结构或同样的事情可以用简单和更好的方式完成。

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="video-item-wrapper">
        <div class="video-image-wrapper">
            <img src="http://placehold.it/600x400" class="img-responsive" />
        </div>
        <div class="play-item-wrapper">
            <img src="http://placehold.it/50.png/09f/fff" />
        </div>
        <div class="video-details-wrapper"> <span>this is video title</span>

        </div>
    </div>
</div>

Answer 1

添加css

.video-item-wrapper{  position: relative;}
.play-item-wrapper{position: absolute;top: 50%;  left: 50%;margin-left: -25px;
  margin-top: -25px;z-index: 9999;}

Answer 2

另一个解决方案是使用以下：

(defun image-wipe-and-insert ()
  (interactive)
  (let ()
    (with-current-buffer (get-buffer-create "*an image area test buffer*")
      (switch-to-buffer (current-buffer))
      (erase-buffer)
      (insert-image
       (find-image '((:type png
              :file "icons/hicolor/128x128/apps/emacs.png"
              :map (((rect . ((0 . 0) . (50 . 50)))
                 area1
                 (pointer hourglass
                  help-echo "You found the first area!"))
                ((rect . ((50 . 50) . (100 . 100)))
                 area2
                 (pointer hand
                  help-echo "You found the second area!")))
              :margin (2 . 2)
              :pointer arrow)))))))

检查Fiddle Here.

中心将重叠图像对齐在另一个图像的中间

2 个答案: