如何將圖像和輸入字段放在頁面的中間和中間？

我需要圖像下方的輸入字段並且不對齊。我將如何進行水平和垂直居中圖像和輸入字段（+按鈕）。截至目前輸入字段是在圖像旁邊，我希望它下面的圖像。如何將圖像和輸入字段放在頁面的中間和中間？

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

如何將圖像和輸入字段放在頁面的中間和中間？

回答

相關問題