Question

对不起我在标题中的可怕措辞。

基本上，我想在列表中的两个图标之间居中文本（尤其是较长的文本），但我希望图标在输入变大时保持在列表的中心。这是我对JSFiddle的尝试：https://jsfiddle.net/39jL0aL7/

我的CSS设置了left，right和var z这些组成的列表。

在JS小提琴中，我有我目前想出的东西。我希望它看起来像这样：

任何帮助都将不胜感激。

Answer 1

您可以使用flexbox来实现此目的。

将.list-group-item设为

.list-group-item {
   display: flex;
   align-items: center;
}

这将垂直居中项目的内容。并且不需要将图标放在适当的位置：绝对。

您还可以通过将self-align: flex-start（或flex-end将其放置在底部）应用于图标，将一个图标垂直放置在顶部。

Updated JSFiddle can be found here

Answer 2

您可以尝试使用transform属性执行此操作，如下所示：

＆＃13;

.abc {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
}
   
.left,
.right {
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-6">
    <ul class="list-group">
        <li class="list-group-item">
            <span class="left"><em class="fa fa-reorder"></em></span>
            <div class="abc">
                Long sentences like these look horrific. Really horrific. I mean really bad. Look at the icons.
            </div>
            <span class="right"><em class="fa fa-reorder"></em></span>
        </li>
        <li class="list-group-item">
            <span class="left"><em class="fa fa-reorder"></em></span>
            <div class="abc">
                Long sentences like these look horrific. Really horrific. I mean really bad. Look at the icons. Long sentences like these look horrific. Really horrific. I mean really bad. Look at the icons.
            </div>
            <span class="right"><em class="fa fa-reorder"></em></span>
        </li>
        <li class="list-group-item"> <span class="left"><em class="fa fa-reorder"></em></span>
            <div class="abc">
                Short sentences like this look gr8 m8.
            </div>
            <span class="right"><em class="fa fa-reorder"></em></span>
        </li>
        <li class="list-group-item">Third item</li>
    </ul>
</div>

＆＃13;

如何将两个图标+强制图标之间的文本居中放在列表中间？

2 个答案: