使用 display:block 创建一个带有 span 标签的全屏离子按钮答案

【问题标题】：Create a full screen ion-button with span tags inside with display:block使用 display:block 创建一个带有 span 标签的全屏离子按钮
【发布时间】：2017-06-10 16:53:16
【问题描述】：

我有一个 Ionic Button 全屏 div，里面有其他 span 标签。我尝试使用
我尝试使用 display:block 但无论什么词居中嵌入中间。如何添加使我的 spans 成为 display:block 项目？

HTML

<ion-content padding>
   <div ion-button (tap)="onTap()" class="buttNext">
     <span class="fullButt">{{corrObj.isCorr}}</span>
     <span class="fullButt">Score is {{corrObj.score}}</span>
     <span class="fullButt">Tap Screen to continue</span>
   </div>
 </ion-content>

CSS

.buttNext{
  height:100vh;
  width:100vw;
  opacity:1;
  background:gray;
 }

.fullButt{
  display: block;
  background: none;
  font-size:30px;
  color:white;
 }

【问题讨论】：

你想达到什么目的？因为“不管什么词居中对齐中间。”这是错误的
这就是发生的事情
那么，你想在你的屏幕上显示什么，现在发生了什么？
我把 ion 的内容改成了一个完整的按钮。不过还是谢谢
在您的下一个问题中，请询问您想要什么，而不是乱扔样式，例如：“我的内容不在屏幕中心”或“我希望我的内容在中心屏幕”，更容易为您提供帮助:)

标签： javascript html css ionic-framework ionic2

【解决方案1】：

我没有让按钮填满屏幕，而是自己制作了一个按钮。这对我来说很完美，完成了我所需要的

<ion-content padding (tap)="onTap()" id="fullAns">
 <div class="ansCont">
   <span id="correct" class="fullButt">{{corrObj.isCorr}}</span>
   <span id="score" class="fullButt">Score is {{corrObj.score}}</span>
   <span id="tap" class="fullButt">Tap Anywhere to continue</span>
 </div>
</ion-content>

【讨论】：