文本对齐设计和按钮上的图标与css

Question

我说它需要帮助，我设计了这些按钮，但是他们看不到订单，我附上图片。

我想要的是这样的东西（如图所示，一切都是有序的）：

page-home {
    p {
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        color: black;
    }
    .body {
        background-color: #FFEB3B;
    }
    .botones {
        vertical-align: text-bottom;
        border: none;
        color: white;
        text-align: left;
        text-decoration: none;
        display: inline-block;
        font-size: 17px;
    }
}

IONIC中的代码HTML

<ion-content padding class="body" align="center">
    <img src="../../assets/logito.png" class="imagen">
    <br>
    <br>
    <button ion-button item-end round full icon-start class="botones">
        <ion-icon name='logo-facebook'></ion-icon>
        Registro via Facebook
      </button>
    <button ion-button item-end round full icon-start color="secondary" class="botones">
        <ion-icon name='person-add'></ion-icon>
        Servicio Particular
      </button>
    <button ion-button item-end round full icon-start color="dark" class="botones">
        <ion-icon name='briefcase'></ion-icon>
        Servicio Corporativo
      </button>
    <br>
    <p>¿Eres nuevo? <a href="http://ionicframework.com/docs/v2">REGISTRATE AHORA</a></p>
</ion-content>

Answer 1

这应该让你开始。

我使用了一个flexbox作为容器，并将内容集中在中间。此外，按钮还有其他造型。

由于我不熟悉ion，你可能需要重写CSS选择器。

p {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: black;
}

.body {
  background-color: #FFEB3B;
}

.botones {
  vertical-align: text-bottom;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
  width: 80%;
  height: 60px;
}

.botones:not(:last-child) {
  margin-bottom: 1em;
}

.botones[color="secondary"] {
  background: blue;
}

.botones[color="dark"] {
  background: red;
}

ion-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
}

<ion-content padding class="body" align="center">
  <img src="http://lorempixel.com/400/200/sports/" class="imagen">
  <br>
  <br>
  <button ion-button item-end round full icon-start class="botones">
        <ion-icon name='logo-facebook'></ion-icon>
        Registro via Facebook
      </button>
  <button ion-button item-end round full icon-start color="secondary" class="botones">
        <ion-icon name='person-add'></ion-icon>
        Servicio Particular
      </button>
  <button ion-button item-end round full icon-start color="dark" class="botones">
        <ion-icon name='briefcase'></ion-icon>
        Servicio Corporativo
      </button>
  <br>
  <p>¿Eres nuevo? <a href="http://ionicframework.com/docs/v2">REGISTRATE AHORA</a></p>
</ion-content>