Question

我有这个JSP，它有一个由Servlet生成的带有Captcha图像的表单。我无法将图像移动到中心。这是我的代码。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
       <link rel="stylesheet" type="text/css" href="signUp.css" />
<div class='login'>
    <h2>Register</h2>
    <input name='username' placeholder='Username' type='text'>
    <input id='pw' name='password' placeholder='Password' type='password'>
    <input name='email' placeholder='E-Mail Address' type='text'>
    <img class="image" name="image" style="left: 50%;" src="http://localhost:8080/totaltesting/CaptchaServlet"> 
    <hr style="color: black">
    <input type="text" class="input_text" name="code" placeholder="Enter the text from the image">
    <div class='agree'>
        <input id='agree' name='agree' type='checkbox'>
        <label for='agree'></label>Accept rules and conditions
    </div>
    <input class='animated' type='submit' value='Register'>
    <!--<a class='forgot' href='#'>Already have an account?</a>-->
</div>
    </body>
</html>

这是CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #2e3740;
  color: #435160;
  font-family: "Open Sans", sans-serif;
}

h2 {
  color: #6d7781;
  font-family: "Sofia", cursive;
  font-size: 15px;
  font-weight: bold;
  font-size: 3.6em;
  text-align: center;
  margin-bottom: 20px;
}

a {
  color: #435160;
  text-decoration: none;
}

.login {
  width: 350px;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-left: -175px;
}
.image{
    left: 50%;
}
input[type="text"], input[type="password"] {
  width: 350px;
  padding: 20px 0px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #435160;
  outline: none;
  color: #6d7781;
  font-size: 16px;
}

input[type=checkbox] {
  display: none;
}

label {
  display: block;
  position: absolute;
  margin-right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  content: "";
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border: 3px solid #435160;
}

#agree:checked ~ label[for=agree] {
  background: #435160;
}

input[type="submit"] {
  background: #1fce6d;
  border: 0;
  width: 350px;
  height: 40px;
  border-radius: 3px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
input[type="submit"]:hover {
  background: #16aa56;
  animation-name: shake;
}

.forgot {
  margin-top: 30px;
  display: block;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
}
.forgot:hover {
  margin-top: 30px;
  display: block;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  color: #6d7781;
}

.agree {
  padding: 30px 0px;
  font-size: 12px;
  text-indent: 25px;
  line-height: 15px;
}

::-webkit-input-placeholder {
  color: #435160;
  font-size: 12px;
}

.animated {
  animation-fill-mode: both;
  animation-duration: 1s;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

@font-face {
  font-family: 'Sofia';
  font-style: normal;
  font-weight: 400;
  src: local('Sofia'), local('Sofia-Regular'), url(http://themes.googleusercontent.com/static/fonts/sofia/v2/eNNA2vlZnUPtgq9g__E3cA.woff) format('woff');
}


@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

因此，您只需复制粘贴此内容并在您的计算机中尝试即可。

我想做的就是将Captcha图像移到中心。

enter image description here

Answer 1

添加：display: block; margin: 0 auto; 删除：left: 50%;

http://jsbin.com/Odijara/2/edit

Answer 2

你必须用div标签包装图像：

<div style="text-align:center">
   <img class="image" name="image" src="http://localhost:8080/totaltesting/CaptchaServlet">
</div>

我想将Captcha图像移动到中心，但即使是左边也不能这样做：50％;

2 个答案: