html - CSS 置换两行字符串

Question

看看这个 fiddle

http://jsfiddle.net/ArvindSadasivam/v8dtj2ke/1/

分区:

 <button class="typeBtn" id="">
        <img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />Flatfront</button>
    <button class="typeBtn" id="">Flatfront TWICE
        <img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />
    </button>

CSS:

.typeDiv {
    position : relative;
    margin : 20px 0 0 20px;
    font-family : OpenSans-Regular;
}

 .typeBtn {
    position: relative;
    width: 110px;
    height: 40px;
    box-shadow: 0 1px 3px #424242;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #D7D7D7;
    color: #000000;
    text-align: right;
    font-family: OpenSans-Regular;
    font-size: 0.7em;
    padding: 0px 40px;
    margin: 15px 10px 0px 0px;
}
.iconTick {
    position : absolute;
    width : 25px;
    left : 5%;
    top : 20%;
}

我希望 Flatfront 两次在垂直方向上处于同一位置。 基本上正确对齐它们。

我该怎么做？

Answer 1

添加

vertical-align: top;

进入你的.typeBtn类

你的类应该是这样的

.typeBtn {
position: relative;
width: 110px;
height: 40px;
box-shadow: 0 1px 3px #424242;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #D7D7D7;
color: #000000;
text-align: right;
font-family: OpenSans-Regular;
font-size: 0.7em;
padding: 0px 40px;
margin: 15px 10px 0px 0px;
vertical-align: top; /*Changed this */
}