html - 将横幅居中对齐

标签 html css

<分区>

我在对齐横幅时遇到问题。
它不能是背景图像,它可以是对象或嵌入,它必须是页面的 100%,但当页面宽度减小时,它必须保持横幅的中心部分可见。

最佳答案

Working Fiddle for both examples

我看不出有什么理由不使用背景图片。 (如果你对这个限制感到遗憾,那么这里是上面的工作 fiddle )

如果你必须使用图像,你可以通过一个简单的 JQuery 函数来实现,看看上面的工作 fiddle 。

var img = $("#bannerWithScript > img"); //or any selector you want for targeting your image

img.css({
    "top": "calc(50% - " + (img.height() / 2) + "px)",
    "left": "calc(50% - " + (img.width() / 2) + "px)"
});

关于html - 将横幅居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18846947/

相关文章:

javascript - 根据数据属性将列表项分组为子列表

jquery - 使用 jQuery 对同一类的输入值进行计数

html - 为什么 medium-offset-2 值不适用

html - 侧边栏导航不占用网站的全部高度

javascript - 在 Window 8 商店应用程序中垂直滚动

javascript - 单击以隐藏每个 div 并在 jquery 中显示另一个 div

javascript - 从 jquery 更新时,jscolor 文本框背景未更改

javascript - 在 DIV 中点击

javascript - 如何使用弹出框输入更改CSS(背景颜色)

html - 比率的媒体查询未触发