我班向上移動，當我在其中鍵入一些

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; 
} 

因此，儘管他們的內容，他們都排在最前面。

Live DEMO