<分区>
我想在主页中央设置一个圆形图像,并用一个按钮覆盖它。页面上没有其他内容,只有一张图片和一个按钮。 您可能会说,我们对编码非常陌生! 我们在 Dreamweaver 上使用 CSS 和 HTML。
<分区>
我想在主页中央设置一个圆形图像,并用一个按钮覆盖它。页面上没有其他内容,只有一张图片和一个按钮。 您可能会说,我们对编码非常陌生! 我们在 Dreamweaver 上使用 CSS 和 HTML。
最佳答案
好的,假设你有几个 div 元素,里面有一个 img:
<div class="parent"><div class="img-container"><img src="http://placekitten.com/230/230" alt="kitten"></div></div>
您可以按如下方式设置您的 CSS:
.parent {
display: table;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.img-container {
height: 500px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
参见 http://jsfiddle.net/NL2ZA/一个演示。显然,您需要编辑类名称以表达在您的元素中更有意义的内容。
关于html - 如何在不将其设置为背景的情况下将图像垂直和水平居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20636088/
相关文章:
html - 客户 X 或 ClientY 必须像带有他的号码的像素一样被读取。我不知道在哪里添加它而不给出语法错误
javascript - 如何在 JavaScript 中循环浏览图片?
javascript - 我的页面上有一个按钮,它使用一些 Javascript 代码来发推文,但它在移动设备上不起作用
html - 如何将 div 与 child 保持在同一打印页面上?
html - 定位两个图像并使它们在移动设备上看起来不错,图像大小不相等
html - 将两个 div 彼此对齐,第三个 div 在它们下面对齐