1

我经历了很多关于这个的事情。但仍然找不到任何解决方案。在每个解决方案中都有一些限制。任何人都可以为我的问题提供一个通用且简单的 css 代码以将 html 链接按钮垂直居中放置在 div 内吗？

如下图所示，创建帐户按钮位于 div google header-bar 的中间 :) 在此处输入图像描述

4

4 回答 4

4

您需要设置line-height相同的 like height，并且display: inline-block

这是一个小提琴。

如果您使用的是 sass，那么很容易编写一个 mixin（以 sass 格式）：

=button($height: 40px)
  height: $height
  line-height: $height
于 2015-09-30T15:44:22.770 回答
2

You can combine display:table-cell and vertical-align:middle

<div style="display:table-cell; vertical-align:middle; height:50px; width:200px; background-color:silver;" >
  <a href="#link">
    <img src="" />
  </a>
</div>
于 2013-03-01T16:43:32.693 回答
1

Just set the heights and margins appropriately.

sample fiddle

<div id="a">
    <div id="b">bbb</div>
    <div id="c">ccc</div>
</div>

#a {
    overflow: auto;
    background-color: yellow;
    height: 100px;
}
#b {
    height: 80px;
    background-color:red;
    width: 50px;
    float: left;
    margin-top: 10px;
}
#c {
    height: 50px;
    background-color: blue;
    width: 80px;
    float: right;
    margin-top: 25px;
}
于 2013-03-01T16:42:10.157 回答
1

我经常使用这个技巧：

.valign-content:before {
   content : ''; 
   display : inline-block; 
   width : 0; height : 100%; 
   vertical-align : middle; 
}

.valign-content>* { 
   vertical-align : middle; 
   display : inline-block; 
}

这是演示：http: //jsfiddle.net/pavloschris/5g3Cz/

对我有用吗...

于 2013-03-01T16:45:48.783 回答