相关疑难解决方法(0)

我试图垂直居中我的标签内容,但是当我添加CSS样式时display:inline-flex,水平文本对齐消失.

如何为每个标签创建文本对齐x和y？

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

可以说我有一个带有字体真棒图标和一些文字的引导按钮:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

如何使文本垂直居中显示？文本现在与图标的下边缘对齐:http://jsfiddle.net/V7DLm/1/

编辑: 我有一个可能的解决方案:http://jsfiddle.net/CLdeG/1/但它感觉有点hacky - 介绍额外的p标签,使用左拉和显示:表.也许有人可以建议一个更简单的方法

我想在图像顶部放置一个播放图标，该图标会重定向到 youtube 页面。我还希望在图像和图标上有悬停效果，图像获得黑色背景，不透明度为 0.5，而图标只是改变颜色。但我仍然坚持在图像中间获取图标。我的 jsfiddle：https ://jsfiddle.net/rgL0ebj7/ 。

我的代码：

.module-box {
display: inline-block;
position: relative;
width: 100%;}

.module-dummy {
margin-top: 100%;}

.module-body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;}

.play-button-div {
margin: 0 auto;
position: relative;
width: 100%;}

.play-button-icon i{
width: 100px;
height: 100px;
color: #0080ff;
background-color: #fff;
border-radius: 55px;
border: 2px solid #0080ff;
font-size: 80px;
text-align: center;
position: absolute;
padding-top: 10px;
padding-left: 10px;}

谢谢！

这是我的代码，我需要使用内联 css 将图标居中：

<div class="small-4 medium-4 large-4 columns">
    <i class="fa fa-check-square-o fa-lg"></i>
</div>