使用 Bootstrap 框架在无序列表中对齐图像和文本

Question

我现在正在尝试解决一个非常特殊的问题，但它似乎并不特别适合我查找过的其他问题。我得到的是一个使用修改后的 Bootstrap css 框架的项目，在特定页面上，我们在无序列表中有合作伙伴徽标，图像和文本标题由锚标签包裹，这里是小提琴的链接：https://jsfiddle.net/coolwebs/ygpu3sja/1/

我在这里CSS to stop text wrapping under image 找到了一篇关于 SO 的好帖子，它通过向左浮动 img 帮助我停止让文本环绕图像底部。然而，合作伙伴标题文本现在在每个徽标旁边都是顶部对齐的。我想让文本在中间垂直对齐，而不是从顶部开始。有什么办法可以做到这一点？只要我将图像向左浮动，文本就会与所有图像的顶部对齐。

我希望我在这里遗漏了一些小的 CSS。

如果有帮助，这里是代码：

<div class="content">
<div class="entry-content">
    <div class="row">
        <div class="col-md-7">
            <h2>Partners</h2>
            <ul class="icons-listing">
                <li><a href="https://www.education.gov.au/national-collaborative-research-infrastructure-strategy-ncris"
                       target="_blank"> <img
                        src="https://research.qut.edu.au/biorefining/wp-content/uploads/sites/59/2017/03/ncris.png"
                        alt=""><span class="partner-text">An Australian Government Initiative National Collaborative Research Infrastructure
                    Strategy</span></a></li>
                <li><a href="http://www.mackaysugar.com.au/Pages/default.aspx" target="_blank"> <img
                        src="https://research.qut.edu.au/biorefining/wp-content/uploads/sites/59/2017/03/mackay-sugar.png"
                        alt="">Mackay Sugar</a></li>
                <li><a href="https://www.qld.gov.au/" target="_blank"> <img
                        src="https://research.qut.edu.au/biorefining/wp-content/uploads/sites/59/2017/03/queensland-government.png"
                        alt="">Queensland Government</a></li>
            </ul>


</div>
</div>

.icons-listing {
    list-style: none;
}

.content .icons-listing li {
  display: table;
  vertical-align: middle;
}

.content .icons-listing img {
  float: left;
}

.partner-text {
  overflow: hidden;
  float: none;
}

Answer 1

将以下内容添加到您的 CSS：

li a {
  display: flex;
  align-items: center;
}

.icons-listing {
    list-style: none;
}

.content .icons-listing li {
  display: table;
  vertical-align: middle;
}

.content .icons-listing img {
  float: left;
}

.partner-text {
  overflow: hidden;
  float: none;
}
li a {
      display: flex;
      align-items: center;
    }

<div class="content">
<div class="entry-content">
    <div class="row">
        <div class="col-md-7">
            <h2>Partners</h2>
            <ul class="icons-listing">
                <li><a href="https://www.education.gov.au/national-collaborative-research-infrastructure-strategy-ncris"
                       target="_blank"> <img
                        src="https://research.qut.edu.au/biorefining/wp-content/uploads/sites/59/2017/03/ncris.png"
                        alt=""><span class="partner-text">An Australian Government Initiative National Collaborative Research Infrastructure
                    Strategy</span></a></li>
                <li><a href="http://www.mackaysugar.com.au/Pages/default.aspx" target="_blank"> <img
                        src="https://research.qut.edu.au/biorefining/wp-content/uploads/sites/59/2017/03/mackay-sugar.png"
                        alt="">Mackay Sugar</a></li>
                <li><a href="https://www.qld.gov.au/" target="_blank"> <img
                        src="https://research.qut.edu.au/biorefining/wp-content/uploads/sites/59/2017/03/queensland-government.png"
                        alt="">Queensland Government</a></li>
            </ul>


</div>
</div>

小提琴here

Answer 2

您需要将锚点显示为表格，并将嵌套的 imaga 标签和 span 标签设置为 display:table-cell

下面是codepen链接..

我想这就是你想要的......

[Here is the codepen link][1]
  [1]: https://codepen.io/chandrashekhar/pen/jwNEQz?editors=1100