如何将这个iframe对象放在带有Bootstrap的顶栏中？

Question

我正试图在GitHub button内垂直居中fixed top-bar in Bootstrap，但它会一直沿着顶部对齐。

我尝试使用vertical-align: middle，但这没有效果。

.github-button {
    background: red; /* to visualize size */
    vertical-align: middle;
}

如果我设置了内部元素的高度和填充，我得到了所需的位置，但这看起来很脆弱而且“hacky”。​​

.github-button > iframe {
    padding-left: 13px;    
    padding-top: 10px;     
    height: 45px;          
}

这是小提琴（扩大您的浏览器页面或面板大小以从移动模式切换到桌面模式）： http://jsfiddle.net/aE9PS/2/

关于如何干净利落地实现这一点的任何想法？我愿意接受第三方图书馆的建议。感谢

Answer 1

1. .github-button有一个height: 100px;，将其替换为30px（以匹配iFrame的高度）
2. 顶部栏的高度为50px，因此请添加margin-top: 10px;

JSFiddle

Answer 2

检查jsFiddle

CSS

.github-button {
    background: red;
    vertical-align: middle;
    padding-left: 13px;    
    padding-top: 7px;     
    height: 45px;  
}