How to align text to center as per the image

Question

I have one svg and it has some big border and because of that the text that follows it does not align with it. So how can I align the text to match it up with the svg.

Image 1: Clearly the text and SVG is not aligned

Image 2: The reason being the border of SVG is kind of more than expected at bottom

So, is there any way I can make my "Dashboard" text come a little up or the SVG to go a little down" so that it alignment is proper. Or the only option is to generate a new SVG file with trimmed borders. Kindly guide.

Code Snippet:

<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

Add vertical-align: middle; to the image. Normally, images are inline elements with a vertical-align of baseline.

 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> 

Answer 2

Try this css code that will help you align the svg element.

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

What the margin-top property does is move the specific element down by the desired result.