1

我想垂直对齐链接中的文本，如下所示：

我想要的是

整个块都是链接，它们的大小都是一样的。我尝试将 line-height 设置为容器的高度以使其居中，然后在链接内使用定义 line-height 的 span 重置 line-height 但它不起作用：

我得到了什么

这是我的代码：

                    <section class="faq">
                        <nav>
                            <ul class="nav nav--stacked">
                                <li><a href=""><span>où est la bulle à verre la plus proche ?</span></a></li>
                                <li><a href=""><span>quand sont les ramassages ?</span></a></li>
                                <li><a href=""><span>x</span></a></li>
                                <li><a href=""><span>x</span></a></li>
                                <li><a href=""><span>x</span></a></li>
                            </ul>
                        </nav>
                    </section>

和CSS：

.faq a {
  display: block;
  padding: 15px;
  height: 100px;
  line-height: 100px;
  padding-left: 90px;
  background: #f2f2f2;
  color: #bdbdbd;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 13px; }

.faq a span {
  line-height: 1.7; }

尝试了“表格单元”的方式，但我没有让它工作。此外，如果你们中的任何人有更清洁的解决方案，那将是非常棒的，非常感谢！

现场版在这里

4

3 回答 3

2

我认为你需要这个改变：

.faq a {
    display: block;
    padding: 15px;
    height: 100px;
    /*line-height: 100px;*/ <---- remove
    padding-left: 90px;
    background: #f2f2f2;
    color: #bdbdbd;
    text-transform: uppercase;
    /*margin-bottom: 10px;*/ <--- delete
    font-size: 13px;
}

.nav--stacked > li {
    display: list-item;
    margin-bottom: 20px;
}


.nav--stacked > li > a {
    display: table-cell;
    vertical-align: middle;
    width: 237px;
}
于 2013-05-19T13:53:31.073 回答
0

删除或减少.faq a填充。这个代码也line-height影响它。并包括background-image:为您的形象。

于 2013-05-19T13:53:38.350 回答
0

好的，为了尝试解决您的所有问题，我会在这里写它。请让我知道这对你有没有用。

HTML：

 <nav class="faq">
     <ul class="nav nav--stacked">
         <li><a href="">où est la bulle à verre la plus proche ?</a></li>
         <li><a href="">quand sont les ramassages ?</a></li>
         <li><a href="">x</a></li>
         <li><a href="">x</a></li>
         <li><a href="">x</a></li>
     </ul>
 </nav>

CSS：

.faq ul {
    margin: 0;
    padding: 0;
}
.faq li {
    list-style: none;
    padding: 0 0 0 90px;
    background: #f2f2f2;
    color: #bdbdbd;
    height: auto;
    line-height: 100px;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.faq li:hover {
    background: #d9dfdc;
    color: #fff;
}
.faq li a {
    color: #c0c0c0;
    text-decoration: none;
}
.faq li:hover a {
    color: #fff;
}

小提琴：http: //jsfiddle.net/zp238/2/

于 2013-05-19T15:08:54.813 回答