Ionic：卡片中垂直居中文本

我想將卡片中的文本垂直和水平居中放置。但它只是居中橫向。我不知道我能做什麼不同。Ionic：卡片中垂直居中文本

的index.html

<body id="bb" ng-app="starter" ng-controller="AppCtrl" style="background-color: lightblue;height:1000px;"> 
    <div class="card"> 
     <div class="item item-divider"> 
      <h2><b>Joke {{jokeNo}}</b></h2> 
     </div> 
     <div class="item item-text-wrap"> 
      <h1>{{joke}}</h1> 
     </div> 
    </div> 
    <div class="control"> 
     <button id="nextJokeButton" class="button button-outline button-positive" ng-click="loadJoke()"> 
      Another one 
     </button> 

     <button id="rateButton" class="button button-outline button-positive" ng-click="rate()"> 
      Rate us 
     </button> 

    </div> 
</body>

的style.css

#nextJokeButton{ 
    margin-top:50px; 
} 

.control{ 
    text-align:center; 
} 

.card{ 
    height: 30%; 
    margin-top:5%; 
    text-align:center; 
    vertical-align: middle; 
    margin-top: 50px; 
} 

h1 { 
    font-size: 23px; 
}

在此先感謝

來源

2016-03-16 Kewitschka

嘗試'display：table-cell;'在css中。 – Quantumplate

仍然無法正常工作... – Kewitschka

您需要設置行高爲.item類和垂直 - 對準h1和h2模擬工作：

.item{ line-height: Xpx;} 
.item .h1{ vertical-align:middle; } 
.item .h2{ vertical-align:middle; }

UPDATE

你可以使用

position:relative;top:50%; transform: translateY(-50%);

在H2。

來源

2016-03-16 23:28:36

不幸的是，這並沒有工作。 – Kewitschka

你有沒有在頁面中的任何其他風格？我正在嘗試在我的瀏覽器中運行（即項目中的行高爲100）。檢查：https://jsfiddle.net/pjnt6k9b/ –

請參閱我編輯的問題與更多的代碼。 – Kewitschka

Ionic：卡片中垂直居中文本

回答

相關問題