Question

我试图在红色屏幕中间显示Booking但是它失败了，主容器必须是display:block属性但是我可以更改子div和span，我能够使它工作margin-top以编程方式设置位置相对，但这导致一些严重的问题，所以我不能在这里使用margin，我更喜欢使用verticle-align：middle和text-align：center here < /强>

HTML

<div class="tabs-bottom"> <div id="tab-1"> <span>Booking</span> </div> </div>

CSS

.tabs-bottom { // this can't change display:block; width: 100%; height: 255px; background:red; } #tab-1 { display: inline-block; text-align: center; vertical-align: middle; }

http://jsfiddle.net/vVnR5/46/

Answer 1

您可以使用绝对定位或以下代码。

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 2

#tab-1 {
    display: block;
    text-align: center;
    vertical-align: middle;
    position: relative; 
    top: 50%; 
    transform: translateY(-50%);  }

Answer 3

最简单的解决方案是将标签显示更改为block。

#tab-1 {
    display: block;
    text-align: center;
    vertical-align: middle;
}

Answer 4

<强> CSS

#tab-1 {
  display: table;
  text-align: center;
  height: inherit;
  width: 100%;
}

#tab-1 span {
    display: table-cell;
  height: inherit;
  vertical-align: middle;
}

既然你说你可以改变孩子display财产我已经对孩子的CSS进行了一些调整

DEMO

Answer 5

vertical-align: middle;仅适用于父级上设置的line-height属性。因此，只需将height更改为line-height。

.tabs-bottom {
    display:block;
    width: 100%;
    line-height: 255px;
    background:red;
    text-align: center;
}
#tab-1 {
    display: inline-block;
    vertical-align: middle;
}

Answer 6

#tab-1 css：

需要进行2次更改

1。）使用line-height使垂直中间。
2。）将display: inline-block;更改为display: block;以获得水平中间值。

如下：

#tab-1 {
    display: block;
    line-height: 255px;
    text-align: center;
   }

检查更新后的Fiddle Here

Answer 7

我希望这会对你有所帮助

尝试一下

.tabs-bottom {
    display:block;
    width: 100%;
    height: 255px;
    background:red;
    text-align: center;
    position: relative;
}
#tab-1 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -8.5px
}

Answer 8

也许只需删除display: inline-block;

.tabs-bottom {
display:block;
width: 100%;
height: 255px;
background:red;
}
#tab-1 {
text-align: center;
vertical-align: middle;
}

http://jsfiddle.net/Igor_Ivancha/kmu3bov4/

Answer 9

尝试使用CSS定位Demo

.tabs-bottom {
    display:block;
    width: 100%;
    height: 255px;
    background:red;
    position: relative;
}
#tab-1 {
      position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
}

Answer 10

.main-div{ height:300px; background:red }

.verticle-middle{ 
position:relative; 
top:50%; 
transform:perspective(1px) translateY(-50%);
text-align:center;
}

<div class="main-div">
<div class="verticle-middle">
Verticle middle text
</div>
</div>

为什么我的跨度不在主容器的中间

10 个答案: