Question

我不会在列表项中垂直对齐我的图标。我已经尝试了一些方法，但无法弄清楚如何将图标正确地对准中心。这是在关闭图标附近带有箭头图标的示例中最明显的。有什么想法吗？

{
    xtype: 'mapPanel',
    title: 'Google Map',
    align: 'middle',
    padding: 10,
    pack: 'center',
    items: [{
        xtype: 'map',
        height: 300,
        width: 500,
        mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
        mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
        center: {
            geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
            marker: {
                title: 'Fenway Park'
            }
        },
        markers: [{
            lat: 42.339641,
            lng: -71.094224,
            title: 'Boston Museum of Fine Arts',
            listeners: {
                click: function (e) {
                    Ext.Msg.alert('It\'s fine', 'and it\'s art.');
                }
            }
        }, {
            lat: 42.339419,
            lng: -71.09077,
            title: 'Northeastern University'
        }]
    }]
}

li {
  display: flex;
}

.fa {
  flex-grow: 0;
  display: flex;
  align-items: center;
  padding-right: 10px;
}

.title {
  flex-grow: 1;
}

Answer 1

从本质上讲，您不能 ...某些字形不在其包围的字体框中居中。

如果在图标周围加上边框，就会看到此内容。

使用Flexbox不能纠正此问题。

li {
  display: flex;
  align-items: center;
}

.fa {
  flex-grow: 0;
  display: flex;
  border: 1px solid grey;
}

.title {
  flex-grow: 1;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li>
    <span class="fa fa-ellipsis-v"></span>
    <span class="fa fa-eye"></span>
    <span class="title">Item 1</span>
    <span class="fa fa-sort-down"></span>
    <span class="fa fa-times"></span>
  </li>
  <li>
    <span class="fa fa-ellipsis-v"></span>
    <span class="fa fa-eye"></span>
    <span class="title">Item with long title</span>
    <span class="fa fa-sort-down"></span>
    <span class="fa fa-times"></span>
    <span class="fa fa-caret-down"></span>
  </li>
</ul>

您已经注意到自己

“有一个fa-caret-down图标，该图标正确居中。”

这似乎是合适的选择。

将fontawesome图标与flexbox垂直对齐

1 个答案: