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

我需要图像下方的输入字段并且不对齐。我将如何进行水平和垂直居中图像和输入字段（+按钮）。截至目前输入字段是在图像旁边，我希望它下面的图像。如何将图像和输入字段放在页面的中间和中间？

<!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>

来源

2017-09-02 Charlotte Barnekow

该问题可以简单地通过设置CSS text-align: center来解决。我还删除了一些HTML问题，例如未关闭的标记<form> & <img>以及不需要的标记<center>。另外，我强烈建议您不要使用所有div元素，而是使用类选择器.className和样式特定的类，或者使用ID选择器#elementId来设置单个元素的样式。

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>

来源

2017-09-02 09:00:48 Nisarg

非常感谢！它水平居中，但也想垂直居中。你会知道如何去做这件事吗？我希望输入字段在图像下方。谢谢你，谢谢 –

已经有一个答案[这里]（https://stackoverflow.com/a/6182661/5894241），显示你可以做到这一点。下面是我创建的一个小提琴，展示了如何将它应用于HTML：https：//jsfiddle.net/09z4v72j/ – Nisarg

只需添加到CSS的margin-top等于10em.I会让你想要什么。

此外，你已经搞砸了一些HTML代码。特别是，你使用表单标记犯了错误。我修正了这些问题。此外，我已经将类添加到了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>

来源

2017-09-02 09:17:29

<!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>

来源

2017-09-02 09:17:48

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

回答

相关问题