Question

我想垂直和水平地将文本放在我的卡中心。但它只是水平居中。我不知道我能做些什么不同。

的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;
}

提前致谢

Answer 1

你需要设置.item类的行高，h1和h2中的vertical-align可以工作：

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

更新

您可以使用

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

在h2。

离子：在卡片中垂直居中文本

1 个答案: