将文本设置为div内的垂直中间

时间:2016-04-26 15:11:06

标签: html css css3

我已经阅读了一些关于将一些文字集中在div中的Q& A但是由于某种原因我尝试的例子对我不起作用。我使用了一些jquery-ui和jquery-mobile css库,但我不认为这是我的问题。 "蓝色按钮"似乎在中间垂直对齐就好了。但为什么不在两个文本列中呢?

以下是jsfiddle链接:http://jsfiddle.net/Thread7/tstwwt9p/

<br/><br/>
<div class="ui-grid-b" style="display: table;width: 100%;border-style: solid;">
  <div class="ui-block-a" style="text-align:center;">
    <button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
  </div>
  <div class="ui-block-b " style="text-align:center;display: table-cell;">Middle Column Text</div>
  <div class="ui-block-c" style="text-align:center;"><a href="#" class="ui-link">Sample Link Text</a></div>
</div>

2 个答案:

答案 0 :(得分:1)

您不需要使用display:table和table-cells来实现垂直居中,尽管它是单向的。

在处理小的单行文本时,我发现将高度和行高设置为相同的值更简单,如下所示:

<div class="ui-grid-b" style="width: 100%;border-style: solid;">
  <div class="ui-block-a" style="text-align:center;height:60px;line-height:60px;">
    <button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
  </div>
  <div class="ui-block-b " style="text-align:center;height:60px;line-height:60px;">Middle Column Text</div>
  <div class="ui-block-c" style="text-align:center;height:60px;line-height:60px;"><a href="#" class="ui-link">Sample Link Text</a></div>
</div>

答案 1 :(得分:0)

试试这个:

.factory('presentationData', ['$indexedDB', 'uuid4','$q', function ($indexedDB, uuid4, $q) {

  var objectStore = $indexedDB.openStore('presentations', function(store) {
    return store;
  });

  return objectStore.then(function(objectStore) {
    var functions = getDefaultDataServiceFunctions(objectStore);

    functions.getAll = function (includeFlaggedForDelete) {
      if (includeFlaggedForDelete) {
        return objectStore.getAll();
      }
      return objectStore.getAll().then(function (presentations) {
        return presentations.filter(function (p) {
          return !(p.meta && p.meta.localStatus === 'deleted');
        });
      });
    };

    functions.getWithLocalStatus = function (status) {
      var query = $indexedDB.queryBuilder().$index('localStatus').$eq(status).compile();
      return objectStore.each(query);
    };

    return functions;
  })
}])