HTML SVG 不会居中

Question

我正在使用 Twitter Bootstrap 和 SVG。我正在努力让 SVG 以 .list-inline 为中心（来自 bootstrap.

Answer 1

<center> 标记已在 HTML5 中弃用，不应使用。您可以通过对包含 SVG 的 a 锚点使用 display: block 和 margin-left: auto; margin-right: auto 或仅通过将整个 <li> 项目居中来对齐 SVG。

            <ul class="list-inline inline-centered">
              <li>
                <a href="https://example.com/">
                  <svg xmlns="http://www.w3.org/2000/svg">
                    <path d="M25 0.4C11.3 0.4 0.4 11.3 0.4 25s11 24.6 24.6 24.6s24.6-11 24.6-24.6S38.7 0.4 25 0.4z M25 4.2 c11.5 0 20.8 9.2 20.8 20.8c0 1 0 1.7-0.2 2.7c-0.6-0.2-1.7-0.4-2.9-0.4c-1 0-2.3 0.2-3.3 0.4c0.2-0.8 0.4-1.5 0.4-2.5 c0-2.1-0.8-4.2-2.3-6.2c0.6-1.7 1.3-5.6-0.2-7.1c-3.5 0-5.4 2.1-6 2.9c-1.7-0.6-3.5-1-5.4-1s-3.7 0.4-5.2 1c-0.6-0.8-2.7-2.7-6-2.7 c-1.5 1.2-0.8 4.8-0.2 6.7c-1.5 1.9-2.3 4-2.3 6.2c0 0.8 0.2 1.7 0.4 2.5c-1 0-3.3-0.4-4.2-0.4s-2.7 0.2-3.8 0.6 c-0.2-1-0.2-1.7-0.2-2.7C4.2 13.5 13.5 4.2 25 4.2z M45.4 28.7c-0.4-0.2-1.9-0.6-3.3-0.6c-0.8 0-1.9 0-2.9 0.2c0-0.2 0-0.2 0.2-0.4 c0.8-0.2 2.3-0.4 3.3-0.4c0 0 0 0 0.2 0c1.2 0 2.3 0.2 2.9 0.4C45.6 28.3 45.6 28.5 45.4 28.7z M30.8 45c-0.6 0.2-1.3 0.4-1.9 0.4 v-2.9c0-0.6 0.4-1 1-1s1 0.4 1 1V45z M23.1 45.8c-0.6 0-1.3-0.2-1.9-0.2v-2.9c0-0.6 0.4-1 1-1s1 0.4 1 1V45.8z M4.4 28.1 c1-0.2 2.7-0.6 3.7-0.6s3.7 0.2 4.4 0.4c0 0.2 0.2 0.4 0.2 0.6c-1.2 0-3.5-0.2-4.6 0c-1.5 0.2-2.9 0.8-3.5 1.2 C4.6 29 4.6 28.7 4.4 28.1z M4.8 30c0.6-0.2 1.9-1 3.5-1.2c1.2-0.2 3.7 0 4.6 0c1.3 3.1 4.4 5.2 9.2 5.8c-0.6 0.4-1.2 1-1.5 1.7l0 0 c-1 1.2-2.9 1.2-4.4 1.2c-1.7 0-2.7-1.3-3.7-2.5c-1-1.2-2.1-1.3-2.7-1.3S9 33.8 9.2 34.2c1.9 1.3 2.5 2.9 3.3 4.2 c0.8 1.3 2.1 1.9 3.7 1.9c0.4 0 2.1 0 2.9 0c0 0.2 0 0.4 0 0.6v4C12.1 42.9 6.5 37.1 4.8 30z M25 41.3c0-0.6 0.4-1 1-1s1 0.4 1 1 v4.4c-0.6 0-1.3 0.2-1.9 0.2V41.3z M32.7 44.2V41c0-2.1-1.2-4.8-3.1-6.2c5-0.8 8.1-2.9 9.4-6c1 0 2.3-0.2 3.1-0.2 c1.3 0 2.9 0.4 3.3 0.6C44 36.2 39 41.7 32.7 44.2z">
                  </svg>
                </a>
              </li>
            </ul>

CSS:

.inline-centered {
  text-align: center;
}

.inline-centered svg {
  width: 50px;
  height: 50px;
}

Fiddle: http://jsfiddle.net/7beuqs6n/

HTML SVG 不会居中

HTML SVG Won't Center

html

svg

twitter-bootstrap