Question

我目前有一个网站rinique.com。我希望动态居中的网站横幅是基于屏幕尺寸（例如iphone和ipad）的“RINIQUE”字样的图像。

目前为了使其成为中心，我已经投入了绝对的价值。下面是我的CSS的片段。

#header #logo {
  float: left;
  position: relative;
  left: 38%;

Answer 1

如果你可以使用简单的CSS，为什么要使用javascript？

#logo {
display: block;
text-align: center;

}

只需将＃徽标表现为块元素，并将其与IMG中心的内容对齐。

http://jsfiddle.net/brutusmaximus/N9XtP/

Answer 2

#logo {
    margin: auto; /* this requires the element to be block-level with a set dimension (i.e., not width: auto) */
    width: 300px; /* or whatever width your asset is */
    display: block; /* <a/> elements are inline by default */
}

Answer 3

尝试删除该css条目并添加此条目。

#logo > img {
  display: block;
  margin-left: auto;
  margin-right: auto; 
}

Answer 4

尝试一下jQuery的这个片段：

    $('#logo').css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2)) + "px");
    $('#logo').css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2)) + "px");

如何动态居中图像（网站横幅）

4 个答案: