Question

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

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

图片2：原因是SVG的边界在底部比预期的要多

那么，有什么方法可以让我的＆＃34;仪表板＆＃34;文字稍微提高或SVG稍微下降＆＃34;这样它的对齐是正确的。或者唯一的选择是生成带有修剪边框的新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>

Answer 1

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

＆＃13;

svg { vertical-align: middle; }

＆＃13;

<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>

＆＃13;

Answer 2

尝试使用此css代码，以帮助您对齐svg元素。

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

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

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

2 个答案: