按钮在离子选项按钮，但我希​​望它是垂直对齐

Question

我在这样的离子选项按钮中写了两个按钮：

            <ion-option-button>
                <button class="button button-icon ion-ios-telephone-outline"></button>
                <button class="button button-icon ion-ios-trash-outline"></button>
            </ion-option-button>

它显示如下： image 1

但我希望两个按钮可以像这样垂直对齐： image 2

任何人都可以告诉我如何设计它...？ 非常感谢...

我在scss中添加如下流行的样式：

            ion-option-button.button {
                background-color: #000;

                &.activated {
                    background-color: #000;
                }
                .button {
                    &:after {
                        content: '';
                        top: initial;
                        left: initial;
                        right: initial;
                        bottom: initial;
                    }
                    &.button-icon {
                        color: $light;
                        font-size: 26px;
                    }
                }
            }

Answer 1

纯css中的解决方案

＆＃13;

＆＃13;

Float.parseFloat(strings[i])

＆＃13;

#vertical-menu {
  height: 180px;
  width: 56px;
}

.button {
  display: block;
  width: 100%;
  height: 50%;
  border: 0;
  background-color: #000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  cursor: pointer;
  outline: none;
}

.ion-ios-telephone-outline {
  background-image: url(http://mealthy.com.hk/images/icons/icon-phone.png);
}

.ion-ios-trash-outline {
  background-image: url(http://www.iconsdb.com/icons/preview/white/trash-2-xxl.png);
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

ion-option-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around; /* optional */
}

Answer 3

这可能是一个css解决方案吗？

ion-option-button{
  display:flex;
  flex-direction: column; 
  width:10px;/**You have to manipulate this value*/
}
ion-option-button.button {
                background-color: #000;

                &.activated {
                    background-color: #000;
                }
                .button {
                    &:after {
                        content: '';
                        top: initial;
                        left: initial;
                        right: initial;
                        bottom: initial;
                    }
                    &.button-icon {
                        color: $light;
                        font-size: 26px;
                    }