css有一种方法可以水平对齐这两个div

Question

这是一个jfiddle

http://jsfiddle.net/6Ebzy/1/

这是结果

请为了看到一个好小提琴，尝试最大化窗口的宽度和高度，以显示jfiddle中的结果

有没有办法将左边的文字与右边的表格对齐？没有使用特定的像素（因为我需要小心，如果用户最小化窗口）

我想要这样的东西：

左边的div是

.validationClass{
    width: 30%;
    height: 100%;
    float: left;
    text-align: center;
}

表单有这个css：

#msform {

    font-family: montserrat, arial, verdana;
    width: 40%;/*totti 600px*/
    margin: auto auto;
    margin-top:10px;
    text-align: center;
    position: relative;
}

我需要在msform中保持的数字栏

Answer 1

是的，只需在此课程中添加position:relative和top：

.validationClass{
width: 30%;
height: 100%;
position: relative;
top: 70px;
float: left;
text-align: center;   
}

fiddle

或者你想要这样的东西fiddle？

然后你必须改变以下内容：

#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 100%;
margin: 0%;
/* margin: 0 10%; */
position: relative;
left: 60%;
top: -20px;
}

.validationClass {
width: 55%;
float: left;
text-align: center;
position: relative;
top: 70px;
}

#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
width: 100%;
top: 0px;
left:58%;
position: absolute;
}

在html

中添加此内容

<div class="body">
    <ul>
        <li class="error">The first name field is required.</li><li class="error">The last name field is required.</li>
        <li class="error">The mobile number field is required.</li>
        <li class="error">The password must be at least 8 characters.</li>
    </ul>
</div>
<div style="clear:left;"></div><!---add this --->

fiddle