垂直居中某些文字

Question

嗨我这里有一张照片

并且文字被推到顶部？

是否存在将其置于中心的财产？

以下是我尝试过的CSS。

 text-align: center;
 margin: center;

Answer 1

您需要line-height。我也添加了您自己的图片供参考：

＆＃13;

＆＃13;

* {font-family: 'Segoe UI'; font-size: 10pt;}
.tabs, .tabs li {margin: 0; padding: 0; list-style: none; display: block;}
.tabs li {display: inline-block; background-color: #ccc; line-height: 50px; padding: 0 10px; border-top: 2px solid #999;}

.theImg {background: url("http://i.stack.imgur.com/rld5h.png") center center no-repeat; line-height: 45px; width: 122px; text-align: center; margin: 20px; font-weight: bold;}

＆＃13;

<ul class="tabs">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

<!-- Using your code! -->

<div class="theImg">Text</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用display: table-cell和vertical-align:middle

将图片包裹在div中

＆＃13;

＆＃13;

#wrapper {
  height: 200px;
  background-color: #999;
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

<div id='wrapper'>
  <img src="" alt="img" />
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以使用这样的显示表：http://jsfiddle.net/swm53ran/34/

<div class="outside">
    <div class="text">This is my text</div>
</div>

.outside {
    display: table;
    background-color:lightgray;
    height:200px;
}

.text {
    display: table-cell;
    vertical-align: middle;
}

Answer 4

将line-height设置为元素的高度：

.tab {
  background-image: url(http://i.stack.imgur.com/rld5h.png);
  width: 122px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  color: white;
  }

<div class="tab">Text</div>

（我在示例中重复使用了您的图像，因此是文本的两倍。）