Question

有几个关于如何垂直居中链接文本的教程。但我没有找到符合我标准的任何内容：

    ul {
      list-style-type: none;
    }
    li {
      height: 40px;
      width: 160px;
      background: red;
      border-bottom: 1px solid green;
    }
    li a {
      line-height: 1;
    }
    li a em {
      width: 40px;
      height: 40px;
      float: left;
      display: inline-block;
      background: yellow;
    }

<ul>
  <li>
    <a><em></em>Text one line</a>
  </li>
  <li>
    <a><em></em>Text multile line Very Very long</a>
  </li>
</ul>

看起来如此：

enter image description here

但所有这些链接中的文字必须是垂直中心，我可以这样做：

li a{
        line-height: 40px;
    }

但如果定位错误，则会出现多行文字。

我怎么能解决我的问题？

http://jsfiddle.net/6qerbfjs/1/

Answer 1

如果您可以在文字周围使用额外的范围，那么您可以使用https://css-tricks.com/centering-in-the-unknown/中的方法将文字居中。

<ul>
  <li>
    <a><em></em><span>Text one line</span></a>
  </li>
  <li>
    <a><em></em><span>Text multile line Very Very long</span></a>
  </li>
</ul>

和css：

ul{
  list-style-type: none;
}
li{
  height: 40px;
  width: 160px;
  background: red;
  border-bottom: 1px solid green;
}

li a{
  line-height: 1;
}

li a em{
  width: 40px;
  height: 40px;
  display: inline-block;
  background: yellow;
  line-height: 100%;
  vertical-align: middle;
}

li a span {
  display: inline-block;
  line-height: 100%;
  vertical-align: middle;
  max-width: 120px;
}

见fiddle。

Answer 2

您可以将文字换成<div>，然后将li a定位为table，而新的<div>则为table-cell。然后vertical-align: middle应该有用。

HTML：

<ul>
    <li>
        <a><em></em><div id="vcenter">Text one line</div></a>
    </li>
    <li>
        <a><em></em><div id="vcenter">Text multile line Very Very long</div></a>
    </li>
</ul>

CSS：

ul{
    list-style-type: none;
}
li{
    height: 80px;
    width: 160px;
    background: red;
    border-bottom: 1px solid green;
}

li a{
    line-height: 1;
    display: table;
}

#vcenter{
    display: table-cell;
    vertical-align: middle;
}

li a em{
   width: 40px;
   height: 80px;
   float: left;
   display: inline-block;
   background: yellow;
}

这是jsfiddle

Answer 3

根据jsFiddle

，有一种方法可以做到这一点

Method使用CSS transform属性：

HTML：

<ul>
    <li> 
       <a>Text one line</a>
    </li>
    <li> 
       <a>Text multile line Very Very longVery Very longVery Very longVery Very longVery Very longVery Very longText multile line Very Very longVery Very longVery Very longVery Very </a>
    </li>
</ul>

CSS：

ul {
    list-style-type: none;
}
li {
    display: block;
    max-width: 500px;
    background: #433669;
    margin: 0 auto 1em;
    height: 140px;
    border-radius: .5em;
    color: white;
}
li a {
    display:inline-block;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

此解决方案基于this article，并根据您的情况进行了一些小调整。

Answer 4

尝试使用百分比：

<div id="linkContainer" style="width:1000px;height:300px">
<a href="#" style="position:relative;width:100%;height:80;top:10%">link</a>
</div>

Answer 5

你好请试试下面的css

function initializeConversion() {

    //Gets the date from non hidden fields and converts it to the format which is required
    if (document.getElementById('datenh1').value.length == 0) //Finds the non-empty field
        setValueOfDateTwo();
    else
        setValueOfDateOne();

    //Get the value from the fields
    cityOneString = document.getElementById('city1').value;
    cityTwoString = document.getElementById('city2').value; 

    //Logging Statements
    console.log("City 1: "+cityOneString);
    console.log("City 2: "+cityTwoString);

    //Gets the coordinates of both cities
    //This is where the issue is
    getCoordinates(cityOneString);
    getCoordinates(cityTwoString);
}

以下是工作演示http://jsfiddle.net/yndxy8rz/

Answer 6

这是最流行的浏览器解决方案

li {
    width           : 200px;
    line-height     : 100px;
    height          : 100px;
    border          : 1px blue solid;        
}
li span {
    display             : -moz-inline-box;  /* FF2 or lower */
    display             : inline-block;     /* FF3, Opera, Safari */
    line-height         : normal;
    vertical-align      : middle;    
}

li span     { *display  : inline;} /* haslayout for IE6/7 */

<强> HTML

<ul>
   <li><span>My text</span></li>
   <li><span>My longer text</span></li>
   <li><span>My text, but this time is really wide</span></li>
   <li><span>My text, some thoughts about how much it will expand in this item.</span></li>
</ul>

CSS：在链接中垂直居中文本

6 个答案: