水平居中 SVG
Horizontally Centering SVG
我似乎无法将我的 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>
我试过自动显示块和边距。我试过文本对齐居中,没有。
我是不是忽略了什么?
已修复。似乎 float: left;
造成了所有的麻烦。
我似乎无法将我的 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>
我试过自动显示块和边距。我试过文本对齐居中,没有。 我是不是忽略了什么?
已修复。似乎 float: left;
造成了所有的麻烦。