Question

我似乎无法横向居中我的SVG徽标。

这是我的CSS：

html body div.body-container div#logo {
    position: absolute; top: 0; left: 0; right: 0; float: none; clear: both;
    width: 100%; max-width: 100%; height: 150px; margin: 0; padding: 0;
    background-image: url(vulco-logo.min.png); background-position: center center; background-repeat: no-repeat; background-size: 175px 55px;
    background-color: rgba(26, 60, 88, 0.9);
    z-index: 20;
}
html body div.body-container div#logo svg {
    position: relative; float: left; clear: none; display: block;
    width: auto; height: 60px; margin: 0 auto; padding: 0; text-align: center;
    fill: #ffffff;
}

HTML：

<div id="logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158.172 50" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMixYMid meet">



</svg></div>

我尝试过显示块和自动边距。我已经尝试过文本对齐中心，没有。我忽略了什么吗？

Answer 1

修正了它。似乎float: left;造成了所有麻烦。

水平居中SVG

1 个答案: