logo标签列表

将SVG与文本内联对齐

htmlcsssvg
12

我有以下的 JSFiddle，其中一个 SVG 被放置在按钮内的文本左侧。我希望 SVG 与文本内联，这样它就可以在按钮中垂直定位。

我考虑使用以下方法：

  • 使用 line-height，但似乎不起作用。
  • 设置 margin-top：然而整个按钮内容会向下移动。

我应该怎么做才能使 SVG 与文本对齐呢？谢谢。

请尝试授予JSFiddle的编辑权限，以便用户可以进行更改并获得您所期望的结果。 - Himesh Aadeshara
5个回答
18

如果 vertical-align 提供的定位不够细微，您可以尝试使用 position: relative; 调整图标的相对位置。

.icon {
    ...
    position: relative;
    top: 0.15em;
}

如果您使用em作为位置单位，那么该类应该可以适用于任何字体大小。

    button {
        font-family:'Texta-Regular', sans-serif;
        font-size: 2.7em;
        line-height: 1.2em;
        display: block;
        margin: 2em auto;
        padding: .3em 2em;
        text-align: center;
        border: none;
        border-radius: 5px;
        -webkitborder-radius: 5px;
        outline: none;
        background-color: #dd4b39;
        color: #fff;
    }
    .icon {
        width: 1em;
        display: inline;
        margin-right: 40px;
        position: relative;
        top: 0.15em;
    }
<button>
    <svg version="1.1" fill="#fff" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96.828 96.827" xml:space="preserve">
        <path d="M62.617,0H39.525c-10.29,0-17.413,2.256-23.824,7.552c-5.042,4.35-8.051,10.672-8.051,16.912c0,9.614,7.33,19.831,20.913,19.831c1.306,0,2.752-0.134,4.028-0.253l-0.188,0.457c-0.546,1.308-1.063,2.542-1.063,4.468c0,3.75,1.809,6.063,3.558,8.298l0.22,0.283l-0.391,0.027c-5.609,0.384-16.049,1.1-23.675,5.787c-9.007,5.355-9.707,13.145-9.707,15.404c0,8.988,8.376,18.06,27.09,18.06c21.76,0,33.146-12.005,33.146-23.863c0.002-8.771-5.141-13.101-10.6-17.698l-4.605-3.582c-1.423-1.179-3.195-2.646-3.195-5.364c0-2.672,1.772-4.436,3.336-5.992l0.163-0.165c4.973-3.917,10.609-8.358,10.609-17.964c0-9.658-6.035-14.649-8.937-17.048h7.663c0.094,0,0.188-0.026,0.266-0.077l6.601-4.15c0.188-0.119,0.276-0.348,0.214-0.562C63.037,0.147,62.839,0,62.617,0z M34.614,91.535c-13.264,0-22.176-6.195-22.176-15.416c0-6.021,3.645-10.396,10.824-12.997c5.749-1.935,13.17-2.031,13.244-2.031c1.257,0,1.889,0,2.893,0.126c9.281,6.605,13.743,10.073,13.743,16.678C53.141,86.309,46.041,91.535,34.614,91.535z M34.489,40.756c-11.132,0-15.752-14.633-15.752-22.468c0-3.984,0.906-7.042,2.77-9.351c2.023-2.531,5.487-4.166,8.825-4.166c10.221,0,15.873,13.738,15.873,23.233c0,1.498,0,6.055-3.148,9.22C40.94,39.337,37.497,40.756,34.489,40.756z" />
        <path d="M94.982,45.223H82.814V33.098c0-0.276-0.225-0.5-0.5-0.5H77.08c-0.276,0-0.5,0.224-0.5,0.5v12.125H64.473c-0.276,0-0.5,0.224-0.5,0.5v5.304c0,0.275,0.224,0.5,0.5,0.5H76.58V63.73c0,0.275,0.224,0.5,0.5,0.5h5.234c0.275,0,0.5-0.225,0.5-0.5V51.525h12.168c0.276,0,0.5-0.223,0.5-0.5v-5.302C95.482,45.446,95.259,45.223,94.982,45.223z" />
    </svg>Sign In with Google</button>

1
谢谢你挽救了这一天。这对我非常有效。 - Maximus
6

嗨，只需将以下代码添加到相应的类中，您就可以得到想要的结果..!!

.icon {
    width: 1em;
    display: inline;
    margin-right: 40px;
    vertical-align: bottom;
}
3

vertical-align: bottom; 应该可以解决问题。

button {
  font-family: 'Texta-Regular', sans-serif;
  font-size: 2.7em;
  line-height: 1.2em;
  display: block;
  margin: 2em auto;
  padding: .3em 2em;
  text-align: center;
  border: none;
  border-radius: 5px;
  -webkitborder-radius: 5px;
  outline: none;
  background-color: #dd4b39;
  color: #fff;
}
.icon {
  width: 1em;
  vertical-align: bottom;
  margin-right: 40px;
}
<button>
  <svg version="1.1" fill="#fff" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96.828 96.827" xml:space="preserve">
    <path d="M62.617,0H39.525c-10.29,0-17.413,2.256-23.824,7.552c-5.042,4.35-8.051,10.672-8.051,16.912c0,9.614,7.33,19.831,20.913,19.831c1.306,0,2.752-0.134,4.028-0.253l-0.188,0.457c-0.546,1.308-1.063,2.542-1.063,4.468c0,3.75,1.809,6.063,3.558,8.298l0.22,0.283l-0.391,0.027c-5.609,0.384-16.049,1.1-23.675,5.787c-9.007,5.355-9.707,13.145-9.707,15.404c0,8.988,8.376,18.06,27.09,18.06c21.76,0,33.146-12.005,33.146-23.863c0.002-8.771-5.141-13.101-10.6-17.698l-4.605-3.582c-1.423-1.179-3.195-2.646-3.195-5.364c0-2.672,1.772-4.436,3.336-5.992l0.163-0.165c4.973-3.917,10.609-8.358,10.609-17.964c0-9.658-6.035-14.649-8.937-17.048h7.663c0.094,0,0.188-0.026,0.266-0.077l6.601-4.15c0.188-0.119,0.276-0.348,0.214-0.562C63.037,0.147,62.839,0,62.617,0z M34.614,91.535c-13.264,0-22.176-6.195-22.176-15.416c0-6.021,3.645-10.396,10.824-12.997c5.749-1.935,13.17-2.031,13.244-2.031c1.257,0,1.889,0,2.893,0.126c9.281,6.605,13.743,10.073,13.743,16.678C53.141,86.309,46.041,91.535,34.614,91.535z M34.489,40.756c-11.132,0-15.752-14.633-15.752-22.468c0-3.984,0.906-7.042,2.77-9.351c2.023-2.531,5.487-4.166,8.825-4.166c10.221,0,15.873,13.738,15.873,23.233c0,1.498,0,6.055-3.148,9.22C40.94,39.337,37.497,40.756,34.489,40.756z"
    />
    <path d="M94.982,45.223H82.814V33.098c0-0.276-0.225-0.5-0.5-0.5H77.08c-0.276,0-0.5,0.224-0.5,0.5v12.125H64.473c-0.276,0-0.5,0.224-0.5,0.5v5.304c0,0.275,0.224,0.5,0.5,0.5H76.58V63.73c0,0.275,0.224,0.5,0.5,0.5h5.234c0.275,0,0.5-0.225,0.5-0.5V51.525h12.168c0.276,0,0.5-0.223,0.5-0.5v-5.302C95.482,45.446,95.259,45.223,94.982,45.223z"
    />
  </svg>Sign In with Google</button>

它更接近了，但是你预览中的图标比文本低。 - Pav Sidhu
0

在我看来，一个适当的（2020年）方法/避免这个问题的方法不是使用负值重新调整，而是使用<text>和<tspan>将其放置在SVG spinly中（您仍然可以使用CSS进行处理）：

CSS：

button svg text {
  font-family: 'Texta-Regular', sans-serif;
  font-size:   20pt;
  }

HTML：

<button>
  <svg viewBox="0 0 200 50">
    <rect rx="5" height="100%" width="100%"/>
    <!-- path d="bla,etc"/ -->
    <!-- path d="bla,etc"/ -->
    <text dx="0" dy="0" x="50%" y="50%" text-anchor="middle"><tspan dominant-baseline="middle">Sign In with Google</tspan></text>
  </svg>
</button>

请注意，Safari希望在<tspan>标签上居中y轴。

所需的边框半径是使用<rect>上的rx完成的。

此外，这是SVG 2.0 - 但我猜在1.0中也没有什么不同。

0
<button>
    <svg viewBox="..." height="..." width="..." ...>
        <path ...>...</path>
    </svg>
    Your text
</button>

针对上述情况，在按钮元素上设置以下属性即可解决问题：
display: flex
text-align: center;

更多关于flex的内容：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接