Question

我将我的WordPress主题更改为Balance theme，并尝试在平板电脑和平板电脑中查看图像徽标的响应和中心位置。智能手机。

我使用JetPack Custom CSS将默认文本“网站标题”更改为图像（徽标）。这是我的自定义CSS：

#title-area {
    background: url(http://www.prospekdigital.com/wp-content/uploads/2015/03/logo-pd-350-135.png) no-repeat;
    height: 135px;
    width: 350px;
    text-indent: -9999px;
}

图像徽标在桌面视图中正确显示，但在我调整浏览器大小时无法显示中心（以测试平板电脑和智能手机媒体查询）。

我已经尝试text-align:center;和margin:0 auto;，但仍然无法工作。

桌面（确定）

enter image description here

当我调整浏览器大小时......（不行）

enter image description here

......还有这个

enter image description here

当我调整浏览器大小时，如何使徽标响应并居中？

Answer 1

尝试以下css：

 image  { margin-right:auto; margin-left:auto; 
    background: url(http://www.prospekdigital.com/wp-content/uploads/2015/03/logo-pd-350-135.png) no-repeat;
        height: 135px;
        width: 350px;
        text-indent: -9999px;}

Answer 2

解决。谢谢@ user10！

#title-area {
    max-width: 350px;
    background: url(http://www.prospekdigital.com/wp-content/uploads/2015/03/logo-pd-350-135.png) no-repeat;
    height: 135px;
    margin: 0 auto;
    text-indent: -9999px;
}

Answer 3

您可以尝试使用以下媒体查询：

CSS：

@media (max-width:767px){
    #title-area {
    background: url("http://www.prospekdigital.com/wp-content/uploads/2015/03/logo-pd-350-135.png") no-repeat center top;
    height: 135px;
    width: 350px;
    text-indent: -9999px;
    max-width:90%;
    margin:0 auto;
}
}

Answer 4

您应该将max-width设置为100%。因此，当窗口小于徽标的宽度时，它将调整大小。

然后将width设置为您想要徽标的尺寸。并使用margin: 0 auto;将其置于中心位置。

@media (max-width:767px){
   .logo {
      display: block;
      width: 180px;
      max-width: 100%;
      margin: 0 auto;
   }
}

以下是演示：http://jsfiddle.net/Lpno3co3/1/

如何使图像徽标响应？

4 个答案: