Question

我需要图像下的输入字段而不是对齐。我将如何在水平和垂直方向上对齐图像和输入字段（+按钮）。截至目前，输入字段位于图像旁边，我希望它位于图像下方。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Solution for Technigo Coding Challenge</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>

body{
  background-color:#18344e;
}
div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: g;
  display: flex;
  align-items: center;
  justify-content:center
}

</style>
</head>
<body>

<div>

<center><img><a href=><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com"  /></a></img></center>

<form action="/action_page.php"><center><form>
<strong>Search</strong>:<input type="text">
<input type="submit"value="Enter"></form></center>
</div>

<body/>

</html>

Answer 1

只需设置CSS text-align: center即可解决问题。我还删除了一些HTML问题，例如未关闭的代码<form>＆amp; <img>以及不需要的标记<center>。

此外，我强烈建议您使用类选择器div和样式特定的类，而不是样式化所有.className元素，或使用ID选择器#elementId来设置单个元素的样式。< / p>

body {
  background-color: #18344e;
}

div {
  text-align: center;
}

<body>
  <div>
    <a href="#"><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
    </a>
    <form action="/action_page.php">
      <strong>Search</strong>:<input type="text">
      <input type="submit" value="Enter">
    </form>
  </div>
</body>

Answer 2

只需添加到CSS margin-top等于10em。我会做出你想要的。

此外，你搞砸了一些HTML代码。特别是，你使用表单标签犯了错误。我修复了这些issuses.Besides，我已经将类添加到div标签，因为它更好地指定。

body {
  background-color: #18344e;
    }

 div.main {
  margin-top: 10em;
  text-align: center;
   }



<body>
  <div class="main">
<a href="#"><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
</a>
<form action="action_page.php">
  <label for="search">Search:</label><input type="text">
  <input type="submit" name="submit" value="Send">
</form>

Answer 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Solution for Technigo Coding Challenge</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        body{
        background-color:#18344e;
        }
        div{
        position:absolute;
        top:0;left:0;right:0;bottom:0;
        background: g;
        display: flex;
        align-items: center;
        justify-content:center
        }
    </style>
    </head>
    <body>
    <div>
    <center><a href="#"><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" /></a>
    <br/>
    <form action="/action_page.php">
    <strong>Search</strong>:<input type="text">
    <input type="submit"value="Enter">
    </form>
    </center>
    </div>
    </body>
</html>

如何将图像和输入字段放在页面的中间和中心？

3 个答案: