使用纯CSS在响应式容器内垂直居中放置按钮? [英] Vertically center a button inside a responsive container with pure CSS?

问题描述

所以我想做一个缩略图效果.

$(window).resize(setThumbHeight);
$(window).resize(centerBtn);

在此处查看

如您所见，我编写了一些JQuery来设置容器高度并使btn居中，我认为这很愚蠢.

As you can see I wrote some JQuery to set the container height and center the btn, which I think is pretty dumb.

我有几个问题:
1.如何在不使用JQuery的情况下保持容器的长宽比.
2.如何使用纯CSS在容器内部垂直将按钮居中? (似乎有人用表格和表格单元完成了此操作)
3.为什么背景网址不起作用? (我在CSS中将该行注释掉了.)

I have a few questions:
1. How can I maintain the aspect ratio of the container without using JQuery.
2. How could I center the button vertically inside the container using pure CSS? (It seems someone had it done with table and table-cell)
3. Why background url is not working? (I have the line commented out in the CSS.)

谢谢大家.

推荐答案

您可以使用此技巧使元素垂直居中:

You can center an element vertically with this trick:

如果更改按钮的宽度或高度，则更改边距值.

change value of margin if you change width or height of your button.

-17px是高度的一半，-30px是宽度的一半

-17px is half of height and -30px is half of width

.thumbnail-mask .btn{
    position:absolute;
    top:50%;
    left:50%;
    margin:-17px -30px;
}

要放大图片，您可以使用以下方法:

and for zoom on picture you can use this:

.my-thumbnail:hover img{
     -webkit-transform:scale(1.5);
     -moz-transform:scale(1.5);
     -o-transform:scale(1.5);
     -ms-transform:scale(1.5);
     transform:scale(1.5);
 }

，并且如果要显示具有背景css属性的图片，则必须在容器.my-thumbnail上具有高度.

and if you want display your picture with background css property, you must have height on your container .my-thumbnail.

这篇关于使用纯CSS在响应式容器内垂直居中放置按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！