水平放置提交按钮并正确对齐错误消息

Question

我正在尝试水平和在通知的中心对齐yes和no按钮。另外，我想将标题和说明对齐在该通知中心的是和否按钮之上。

以下是jsFiddle以下内容：

$(document).ready(function() {
  $("#form").validate({
    rules: {
      time: {
        required: true,
        number: true
      },
      title: "required"
    },
    messages: {
      time: "Please enter time(digit) in Seconds",
      title: "Please enter the title"
    }
  });

  $("#notify3").hide();

  $("#c").click(function(e) {
    if ($('#form').valid()) {

      $("#notify3").slideDown();

      var timeOut = parseInt($("#time").val()) * 1000;
      var str = $("#title").val();
      var str1 = $('#desc').val();
      $('.message').append(str, "</br>", str1);

      setTimeout(function() {
        $("#notify3").slideUp();
      }, timeOut);
    }

    return false;
  });

  $("#yes").click(function(e) {

    $("#notify3").slideUp();
    $(".cy").slideDown(500).delay(1000).slideUp(500);

  });

  $("#no").click(function(e) {

    $("#notify3").slideUp();
    $(".cn").slideDown(500).delay(1000).slideUp(500);
  });




});

#notify3 {
  width: 40%;
  position: absolute;
  top: 50%;
  left: 30%;
  height: 85px;
  background: #CCCCCC;
  opacity: 0.8;
  display: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-style: solid;
  border-color: black;
}
#confirm {
  width: 20%;
  position: absolute;
  top: 0;
  left: 40%;
  height: 50px;
  background: #FFFF00;
  opacity: 0.5;
  display: none;
}
.message {
  font-size: 20px;
  width: 100%;
  text-align: center;
  padding: 10px;
}
.message .y,
.n {
  bottom: 0;
  right: 0;
}
#form .formelement {
  display: inline-block;
  padding: 10px 10px;
  width: 900px;
}
#form .formelement label {
  float: left;
  text-align: left;
  width: 110px;
}
#form .formelement label.error {
  color: red;
  display: inline-block;
  margin: 4px 0 10px 100px;
  padding: 0;
  text-align: left;
  width: 900px;
}

<div id="confirm" class="cy">
  <h3 style="text-align:center;">Approved</h2></div>
<div id="confirm" class="cn"><h3 style="text-align:center;">Reject</h2></div>
<div id="notify3">
    <div class="message">
        <div class="y"><input type="submit" class="submit" value="Yes" id="yes"/>
        <input type="submit" class="submit" value="No" id="no"/>

        </div>
    </div>
</div>


<fieldset>


<form action="" id="form" >

            <div class="formelement">
                <label for="time">Time(in Sec)* : </label>
                <input type="text" name="time" id="time"/>
            </div>

            <div class="formelement">
                <label for="title">Title* : </label>
                <input type="text" name="title" id="title"/>
            </div>

            <div class="formelement">
                <label for="desc">Description : </label>
                <input type="text" name="desc" id="desc"/>
            </div>

            <div class="formelement">
                <input type="submit" value="Confirm" class="submit" id="c"/>
            </div>


</form> 
</fieldset>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="valid.js"></script>

Answer 1

请在这里查看JS小提琴。我希望它会对你有所帮助。 使用一些额外的类消息。

<div class="cnfmsg"></div>

http://jsfiddle.net/fwsk1rq4/8/

新小提琴： http://jsfiddle.net/fwsk1rq4/10/

Answer 2

尝试从height:85px删除id "#notify3"并更新课程＆＃34; .message＆＃34;使用padding: 10px 0将解决您的问题!!

Fiddle Demo