Question

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

what i want

整个块都是链接，它们都是相同的大小。我尝试将行高设置为容器的高度以使其居中，然后使用带有链接内部定义的行高的跨度重置行高，但它不起作用：

what I get

这是我的代码：

                    <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; }

尝试了“桌子式”方式，但我没有让它发挥作用。此外，如果你们中的任何人有一个更清洁的解决方案，那将是非常棒的，非常感谢！

Live version here

Answer 1

我认为你需要这个改变：

.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;
}

Answer 2

删除或减少.faq a填充。此代码line-height也会影响它。并为您的图片添加background-image:。

Answer 3

好的，试着解决你所有的问题，在这里我将如何编写它。让我知道它是否适合你。

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/

垂直对齐多条线突破

3 个答案: