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

Question

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

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

我希望我在这里遗漏了一些小的 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>

fiddle here