将链接放置在 div 的中间（水平/垂直）

Posted 2023-03-05

【中文标题】将链接放置在 div 的中间（水平/垂直）

【英文标题】：Placing link in the middle (horizontally/vertically) inside the div

【发布时间】：2014-01-09 17:27:38

【问题描述】：

我需要将 div 内的链接垂直和水平居中。

我的 CSS：

    .div 
       display:block;
       background:red;
       width:162px;
       height:168px;
    
    .span  
    .link  

我的 html：

    <div class="div">
       <span class="span">
          <a href="#" class="link"> Text in middle </a>
       </span>
    </div>

链接：http://jsfiddle.net/pjWUC/

【参考方案1】：

根据您示例中的编码，使用：

Updated jsFiddle example - a 元素垂直和水平居中。

.div 
    display:table;
    background:red;
    width:162px;
    height:168px;

.span 
    display:table-cell;
    vertical-align:middle;
    text-align:center;

【讨论】：

It works in IE8, no lower. 你需要在 IE7 中工作的东西吗？

是的，我也需要 IE7 支持。我相信它会通过 display: inline-block; 来完成。 ?通过在css属性前添加*来定位IE7及更低版本是否可以？

【参考方案2】：

.div 
    display:table-cell;
    text-align: center;
    vertical-align: middle;
    ...

很遗憾，根据this，IE 不支持 display:table-cell。

【讨论】：

为什么不呢？您没有指定任何进一步的要求。

因为这会使文本水平居中而不是垂直居中。自己试试吧。。

我很抱歉。我省略了 display: 部分和浏览器兼容性信息。已编辑。