Question

我现在正试图解决的一个特殊问题，并不是特别适合我提出的其他问题。我得到的是一个使用修改后的Bootstrap css框架的项目，在特定的页面上，我们在无序列表中有合作伙伴徽标，图像和文本标题由锚标记包裹，这里是一个指向小提琴的链接：{{3} }

我在SO https://jsfiddle.net/coolwebs/ygpu3sja/1/上找到了一篇很好的帖子，它帮助我通过浮动img left来阻止文本环绕图像的底部。但是，合作伙伴标题文本现在在每个徽标旁边都是顶部对齐的。我希望文本在中间垂直对齐，而不是从顶部开始。有没有办法实现这个目标？只要我将图像浮动到左侧，文本就会对齐所有图像的顶部。

我希望我在这里错过一些小的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标签显示为：table-cell

下面是codepen链接..

我认为这是你想要的......

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

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

2 个答案: