如何将SVG与文本对齐? [英] How do I position my SVG inline with text?

问题描述

我有一个SVG，我想将其放置在某些内联文本旁边，作为导航栏的一部分，如下所示:

I've got an SVG that I want to place next to some inline text as part of a navbar like so:

现在的问题是，它与SVG不兼容.看起来像这样，从导航栏中溢出了:

The problem now is that it's not inline with the SVG. It looks like this, overflowing out from the navbar:

这是我的HTML的代码段(有点大，所以请单击显示代码段"):

Here's a snippet of my HTML (it's a bit large so click 'Show code snippet'):

.navbar {
  height: 95px;

  margin: 0;
  padding-left: 50px;
  padding-right: 50px;

  box-shadow: 0 3px 4px grey;

  list-style-type: none;
}

.navbar > li {
  height: 100%;

  float: right;
}

.navbar > .navbar-logo {
  width: 75px;
  height: 75px;

  margin: 10px;

  float: left;

  font-family: 'Oswald', sans-serif;
  font-size: 50px;
}

.logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo-compass-north, .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.logo-compass-south {
  fill: none;
}

.logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

<ul class="navbar">
  <li class="navbar-logo">
    <svg x="0px" y="0px" viewBox="0 0 272.6 272.6">
      <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
      <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
      <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
      <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
    </svg>
    <span>Text</span>
  </li>
</ul>

使用文本span上的position: absolute将其设置为所需的内联状态.但这使文本超出了li的范围.

I got it to the desired inline state with position: absolute on the span of text. But that leaves the text outside the bounds of the li.

如何将文本与SVG内联放置(没有position: absolute)?我希望li在其范围内同时包含SVG和文本.

How can I position the text inline with the SVG (without position: absolute)? I want the li to contain both the SVG and text within its bounds.

推荐答案

您的主要问题是，由于某种原因，您将<li>设置为较窄的宽度:

Your main problem is that you were, for some reason, setting the <li> to a narrow width:

.navbar > .navbar-logo {
  width: 75px;
  height: 75px;
}

只需除去这些宽度和高度值即可.您不需要它们.应该将该宽度和高度应用于SVG.

Just get rid of those width and height values. You don't need them. That width and height should be applied to the SVG instead.

.navbar > .navbar-logo > svg {
  width: 75px;
  height: 75px;
  vertical-align: top;
}

vertical-align用于使文本顶部与SVG顶部对齐.另外，我们给出文本line-height: 75px;，以便它自动与SVG垂直居中对齐.

The vertical-align is there to make the top of the text align with the top of the SVG. Plus we give the text line-height: 75px; so that it automatically centres itself vertically with the SVG.

最终结果

(在去除了一些其他不必要的位之后)

.navbar {
  height: 95px;
  margin: 0;
  padding-left: 50px;
  padding-right: 50px;
  box-shadow: 0 3px 4px grey;
  list-style-type: none;
}

.navbar > .navbar-logo {
  margin: 10px;
  float: left;
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
  line-height: 75px;
}

.navbar > .navbar-logo > svg {
  width: 75px;
  height: 75px;
  vertical-align: top;
}




.logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.logo-compass-north, .logo-compass-south {
  stroke: black;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.logo-compass-south {
  fill: none;
}

.logo-compass-center {
  fill: black;
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

<ul class="navbar">
  <li class="navbar-logo">
    <svg x="0px" y="0px" viewBox="0 0 272.6 272.6">
      <circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
      <polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
      <polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
      <circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
    </svg>
    <span>Text</span>
  </li>
</ul>

这篇关于如何将SVG与文本对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！