Question

您好我的网站上有一个徽标，我似乎无法集中注意力。我的徽标css如下，

@media only screen and (min-width: 768px) {
    #logo {
        float: none;
        margin: 0 auto;
        width: 768px;
    }
}

http://www.questdesign.com.au/

你有可能知道我错过了什么吗？任何帮助都会很棒。感谢。

Answer 1

尝试 text-align：center;

@media only screen and (min-width: 768px) {
    #logo { float: none; margin: 0 auto; width: 768px; text-align:center; }
}

Answer 2

img是内嵌代码，因此即使您添加margin:auto也无法使用。添加属性display:block，它会将img作为块级元素，margin:0 auto;将使其成为中心。

您的代码将是

@media only screen and (min-width: 768px) {
    #logo { float: none; margin: 0 auto; width: 768px; display:block;}
}

Answer 3

您可以添加text-align：center;到父 div和你想让图像居中的宽度（100％例如）去掉边距0 auto

Answer 4

ng-options="b.name for b in brands track by b.id"是内嵌代码，因此您需要更改img然后更改display:block或在父标记中添加margin: 0 auto

Answer 5

您可以尝试将flexbox用于徽标容器。

#logo{
    width:800px;
    display: flex;
    border: 1px solid black;
    align-items: center;
    justify-content: center;
    text-align: center;
}

这里的例子：
https://jsfiddle.net/86n9qb7b/

如何使用浮动居中徽标图像

5 个答案: