为了账号安全,请及时绑定邮箱和手机立即绑定

怎样把input框放入div垂直居中

/ 猿问

怎样把input框放入div垂直居中

清峯 2019-03-25 22:05:50

https://img1.mukewang.com/5c98e00b0001ea9703140108.jpg

https://img4.mukewang.com/5c98e00b00018f8107520497.jpg

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">    

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

<link rel="stylesheet" type="text/css" href="styles.css">

-->


<style type="text/css">

.div-Height{

border:1px solid #F00; 

width:260px; 

height:30px;

}


</style>

  </head>

  

  <body>


    <form action="servlet/MyServlet" method="post">

    <div class="div-Height">

    <img alt="" src="name.png" width="30" height="30">

    <input type="text" id="text" name="name"  placeholder="邮箱账号或手机号">

    </div>

    <div class="div-Height">

    <img alt="" src="pwd.png" width="30" height="30">

    <input type="password" name="pwd" placeholder="密码"><br>

    </div>

   

    <div>

    <input type="submit" value="Enter" id="enter"> 

    </div>

    </form>


  </body>

</html>


查看完整描述

1 回答

已采纳
?
pardon110

由于图片与input都是行内元素,垂直一般要求内容与行高相同,居中通常要求被居中元素是块元素。所以你可以这样做,将行内元素变成块元素,或在它之上包裹一层div。具体代码如下,可以实现你要 的效果

<div class="div-Height">
    <div style="text-align: center;margin: 0 auto;line-height:30px;">
        <img alt="" src="name.png" width="30" height="30">
        <input type="text" id="text" name="name" placeholder="邮箱账号或手机号">
    </div>
</div>


查看完整回答
反对 回复 2019-03-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信