css - 带有 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>