如何根据图像将文本对齐到中心答案

【问题标题】：How to align text to center as per the image如何根据图像将文本对齐到中心
【发布时间】：2017-01-05 16:38:16
【问题描述】：

我有一个 svg，它有一些大边框，因此它后面的文本与它不对齐。那么如何对齐文本以使其与 svg 匹配。

图 1：显然文本和 SVG 未对齐

图 2：SVG 的边框在底部有点超出预期

那么，有什么办法可以让我的“仪表板”文本稍微向上或 SVG 向下一点”，这样它就可以正确对齐。或者唯一的选择是生成一个带有修剪的新 SVG 文件边界。请指导。

代码片段：

<ul class="nav side-menu">
       <li><a>
                  <svg height = "30px" fill = "#AFAFAF" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
                <path d="M981.9,523.4c-25.8-60.7-62.6-115.3-109.5-162.3c-46.9-46.9-101.5-83.8-162.2-109.6c-62.9-26.7-129.6-40.3-198.2-40.3
                s-135.3,13.6-198.2,40.3c-60.7,25.8-115.3,62.7-162.3,109.6c-46.9,46.9-83.6,101.5-109.4,162.3C15.3,586.4,2,653.1,2,721.7v14.3
                C2,787.7,43.7,830,95.4,830h833.1c51.7,0,93.4-42.3,93.4-94.1v-14.3C1022,653.1,1008.7,586.4,981.9,523.4z M980,735.9
                c0,28.6-22.8,52.1-51.4,52.1H535l0.1-82.4c6.8-3.4,12.8-8.6,17.3-15.3c9.2-13.9,106.5-199.7,106.5-199.7c7-10.6,4.2-24.9-6.4-31.9
                c-10.6-7-24.8-4.2-31.9,6.4c0,0-134.4,161-143.7,174.9c-13.8,20.7-8.4,48.8,12.2,62.7L489,788H95.4C66.8,788,44,764.5,44,735.9
                v-14.3c0-19.4,1-38.2,3.3-57l67,0.3c0,0,0,0,0,0c12.7,0,23-10.5,23-23.2c0-12.7-10.3-23.1-23-23.1L55,618.5
                c22.4-99.1,76.2-186.3,150.4-250.7l43.2,43.2c4.5,4.5,10.4,6.7,16.3,6.7c5.9,0,11.8-2.2,16.2-6.7c9-9,9-23.5,0-32.5l-39.3-39.3
                c70.5-49.9,155.4-80.9,247.1-85.4l-0.1,58.2c0,12.7,10.3,23,23,23c0,0,0,0,0,0c12.7,0,23-10.3,23-23l0.1-58.2
                c91.5,4.4,176.3,35.3,246.7,85.1L742,378.4c-9,9-9,23.5,0,32.5c4.5,4.5,10.4,6.8,16.3,6.8c5.9,0,11.8-2.2,16.2-6.7l43.6-43.6
                C892.6,431.8,946.6,519,969,618.3l-54.3-0.3c0,0,0,0,0,0c-12.7,0-23,10.5-23,23.2c0,12.7,10.3,23.1,23,23.1l62.1,0.1
                c2.3,18.8,3.3,37.9,3.3,57.2V735.9z"/>
                </svg> &nbsp; &nbsp;   Dashboard 

            </a>
    </li>
</ul>

【问题讨论】：

您可以使用一些图标字体来代替 svg，例如 font-awesome，这样您就可以轻松添加任何图标。它将与相应的文本对齐
对不起。 “仪表板”只是一个文本。我在代码中添加了 sn-p。请指导。
我有自己的 SVG，它实际上不存在于“font-awesome”库中。而且我不知道如何将 SVG 转换为“图标”，这样我的 html 就不会笨拙。这就是我在我的 html 中有这么一大块 SVG 代码的原因。

标签： html css svg icons

【解决方案1】：

试试这个 CSS 代码，它可以帮助您对齐 svg 元素。

svg {
    margin-top: 20px; /*you can change this later to make the result closer*/
}

margin-top 属性的作用是将特定元素向下移动所需的结果。

【讨论】：

我是不是在做傻事。此代码 sn -p 对 UI 没有任何影响。我什至试过margin-top = 200px。唯一的区别是我在同一个代码块中编写样式。我没有用于样式的单独代码块。所以我的代码看起来像<svg margin-top = "20px" height = "30px" fill = "#AFAFAF" version="1.1" // REMAINING CODE
你不会像那样内联样式。你这样做。 <svg style="margin-top: 20px; height: 30px;"></svg>
svg 像 xml 一样工作。我不知道我是否需要使用样式和所有内容。请在问题中查看我的代码 sn-p。我从未使用过样式标签。我是新手，所以有点困惑。
感谢您的指导。欣赏它。

【解决方案2】：

将vertical-align: middle; 添加到图像中。通常，图像是具有垂直对齐基线的内联元素。

svg { vertical-align: middle; }

<ul class="nav side-menu">
       <li><a>
                  <svg height = "30px" fill = "#AFAFAF" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
                <path d="M981.9,523.4c-25.8-60.7-62.6-115.3-109.5-162.3c-46.9-46.9-101.5-83.8-162.2-109.6c-62.9-26.7-129.6-40.3-198.2-40.3
                s-135.3,13.6-198.2,40.3c-60.7,25.8-115.3,62.7-162.3,109.6c-46.9,46.9-83.6,101.5-109.4,162.3C15.3,586.4,2,653.1,2,721.7v14.3
                C2,787.7,43.7,830,95.4,830h833.1c51.7,0,93.4-42.3,93.4-94.1v-14.3C1022,653.1,1008.7,586.4,981.9,523.4z M980,735.9
                c0,28.6-22.8,52.1-51.4,52.1H535l0.1-82.4c6.8-3.4,12.8-8.6,17.3-15.3c9.2-13.9,106.5-199.7,106.5-199.7c7-10.6,4.2-24.9-6.4-31.9
                c-10.6-7-24.8-4.2-31.9,6.4c0,0-134.4,161-143.7,174.9c-13.8,20.7-8.4,48.8,12.2,62.7L489,788H95.4C66.8,788,44,764.5,44,735.9
                v-14.3c0-19.4,1-38.2,3.3-57l67,0.3c0,0,0,0,0,0c12.7,0,23-10.5,23-23.2c0-12.7-10.3-23.1-23-23.1L55,618.5
                c22.4-99.1,76.2-186.3,150.4-250.7l43.2,43.2c4.5,4.5,10.4,6.7,16.3,6.7c5.9,0,11.8-2.2,16.2-6.7c9-9,9-23.5,0-32.5l-39.3-39.3
                c70.5-49.9,155.4-80.9,247.1-85.4l-0.1,58.2c0,12.7,10.3,23,23,23c0,0,0,0,0,0c12.7,0,23-10.3,23-23l0.1-58.2
                c91.5,4.4,176.3,35.3,246.7,85.1L742,378.4c-9,9-9,23.5,0,32.5c4.5,4.5,10.4,6.8,16.3,6.8c5.9,0,11.8-2.2,16.2-6.7l43.6-43.6
                C892.6,431.8,946.6,519,969,618.3l-54.3-0.3c0,0,0,0,0,0c-12.7,0-23,10.5-23,23.2c0,12.7,10.3,23.1,23,23.1l62.1,0.1
                c2.3,18.8,3.3,37.9,3.3,57.2V735.9z"/>
                </svg> &nbsp; &nbsp;   Dashboard 

            </a>
    </li>
</ul>

【讨论】：

我是不是在做傻事。它似乎对我不起作用。 <svg vertical-align = "middle" height = "30px" fill = "#AFAFAF" // REMAINING CODE.
我的样式与整个代码块的唯一区别是。我没有像你那样使用单独的代码块来进行样式设置。
我在示例中使用了 CSS 属性。如果这是内联复制，我猜你会在你的 SVG 的 style 属性中添加 CSS 属性声明，而不是组成一个名为 vertical-align 的新属性，例如style="vertical-align: middle; enable-background:new 0 0 1024 1024;"
问题的作者用 css 设置了错误的样式。
我使用了单独的样式块。它奏效了。非常感谢！