Question

我正在尝试将SVG图标与文本对齐。我已经阅读了很多有关如何操作的消息来源，使用vertical-align: middle作为最佳选择。

我也能够做到，但有一个问题我想要答案。

我见过的所有资源都告诉您只将vertical-align: middle放在img元素上。 E.g。

http://codepen.io/johnasp/pen/bqadn/
Vertically align text next to an image?

但在我的特定情况下，我需要在vertical-align: middle和svg元素上添加span。差异非常微妙。但它就在那里。

这是小提琴：

html, body {
    font-size: 32px;
}

.icon {
    height: 64px;
    width: 64px;
    vertical-align: middle;
}

span {
    vertical-align: middle; // Try commenting this line
}

<ul>
  <li>
    <svg viewBox='0 0 16 16' class="icon" >
      <path d="M7.5 1c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5zM7.5 14.5c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6zM8 8v-2h2v-1h-2v-1h-1v1h-2v4h2v2h-2v1h2v1h1v-1h2l-0-4h-2zM7 8h-1v-2h1v2zM9 11h-1v-2h1v2z">
      </path>
    </svg>
    <span>3.4Km</span>
  </li>
</ul>

尝试评论与span标记垂直对齐的行，并看到文本会向上移动。

有人可以告诉我为什么我需要垂直对齐我的svg和span标签而不仅仅是svg，而不是在其他地方工作吗？

Answer 1

您遇到问题的主要原因是您的图标不会集中放在SVG视图框中。

您的viewBox为"0 1 15 15"，但如果您检查它，图标实际上会占用<span>。如果您更新viewBox，它就更好地在线上，而不必垂直对齐html, body { font-size: 32px; } .icon { height: 64px; width: 64px; vertical-align: middle; } span { }。

＆＃13;

<ul>
  <li>
    <svg viewBox='0 1 15 15' class="icon" id="foo">
      <path d="M7.5 1c-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5c4.142 0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5zM7.5 14.5c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6zM8 8v-2h2v-1h-2v-1h-1v1h-2v4h2v2h-2v1h2v1h1v-1h2l-0-4h-2zM7 8h-1v-2h1v2zM9 11h-1v-2h1v2z">
      </path>
    </svg>
    <span>3.4Km</span>
  </li>
</ul>

＆＃13;

function MyCustomArray(){

}

MyCustomArray.prototype = $.extend(Object.create(Array.prototype), {
    /* example of creating own method */
    evenonly : function(){
        return this.filter(function(value){return (value % 2 == 0);});
    },

    /* example for overwriting existing method */
    push : function(value){
        console.log('Quit pushing me around!');

        return Array.prototype.push.call(this, value);
    }
});

var myca = new MyCustomArray();
myca instanceof MyCustomArray /*true*/
myca instanceof Array /*true*/
myca instanceof Object /*true*/
myca.push(1); /*Quit pushing me around!*/
myca.push(2); /*Quit pushing me around!*/
myca.push(3); /*Quit pushing me around!*/
myca.push(4); /*Quit pushing me around!*/
myca.push(5); /*Quit pushing me around!*/
myca.push(6); /*Quit pushing me around!*/

myca.length; /*6*/
myca.evenonly() /*[2, 4, 6]*/

＆＃13;

垂直对齐文本和SVG图标

1 个答案: