How to put the image and input field in the middle and center of a page?

Question

I need the input field under the image and not aligned. How I would go about centering the image and input field (+button)horizontally and vertically. As of now the input field is next to the image and I would like it below the image.

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

score 1 · Answer 1 · answered Sep 02 '17 at 09:00

1

The problem can be solved simply by setting CSS text-align: center. I have also removed some HTML issues such as tags that weren't closed <form> & <img>, and tags that weren't required <center>.

Also, I would strongly suggest that instead of styling all div elements, you use class selectors .className and style specific classes, or use ID selectors #elementId to style individual elements.

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>

answered Sep 02 '17 at 09:00

Nisarg Shah

14,151
6
34
55

Many thanks! It is centered horizontally but would like to center it vertically as well. Would you know how to go about this? I would like the input field to be below the image. thank you, thank you – Charlotte Barnekow Sep 02 '17 at 09:27
There's already an answer [here](https://stackoverflow.com/a/6182661/5894241) that shows how you could do that. Here's a fiddle I have created showing how you could apply that for your HTML: https://jsfiddle.net/09z4v72j/ – Nisarg Shah Sep 02 '17 at 09:43

score 0 · Answer 2 · answered Sep 02 '17 at 09:17

Just add to CSS margin-top equals to 10em.I will make what you want.

In addition, you've messed up some html codes. Especcially, you made mistakes using form tag.I fixed those issuses.Besides, that I have added class to div tag since it better to specifiy.

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>

score 0 · Answer 3 · answered Sep 02 '17 at 09:17

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

How to put the image and input field in the middle and center of a page?

3 Answers3