html - 当我在其中输入内容时，我的班级向上移动

Question

HTML

<!--start of steps-->  
    <div id="stepscontainer">
    <div class="step">
    <p>STEP 1</p>
    <p style="font-size:12px;">SHARE US WITH YOUR FRIENDS</p>
    </div>

    <div class="step">
    <p>STEP 2</p>
    <p style="font-size:12px;">COMPLETE A SHORT OFFER</p>
    </div>

    <div class="step">
    <p>STEP 3</p>
    <p style="font-size:12px;">ENJOY YOUR FREE RUNESCAPE MEMBERSHIP</p>
    </div>
    </div>
    <!--end of steps-->

CSS

.step{
    width:250px;
    height:200px;
    background-color:#FFF;
    color:#121001;
    display:inline-block;
    padding-right:20px;
    margin-right:10px;
    margin-left:10px;
    }
.step p{
    font-size:30px;

    }   
#stepscontainer{
    height:200px;
    width:900px;
    position:relative;
    top:-610px;
    text-align:center;
    }

在步骤中它向上移动了一点，因为有两个行，即使有超过一行的文本，有没有办法让它们保持对齐？

Answer 1

"有没有什么方法可以让它们在多行文本的情况下保持对齐？ "

添加vertical-align: bottom;到.step类是一种方法：

.step{
width:250px;
height:200px;
background-color:#FFF;
color:#121001;
display:inline-block;
padding-right:20px;
margin-right:10px;
margin-left:10px;
vertical-align: bottom;
}

http://jsfiddle.net/jTD8q/

Answer 2

.step{
   vertical-align: top;
}

因此，尽管它们的内容，它们都在顶部对齐。

现场演示