CODEWITHSUNDEEP
htmlcss
Qumbaala
Qumbaala

Reputation: 253

How to position an input field inside of a DIV

I'm trying to position an input field inside of its parent div. I want to float the box to the right and center it vertically, but I can't seem to get it to work.

Here is my HTML:

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script src="index.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<html>
    <div id="millitary_conflict">Millitary Conflict<input type="number" value="0" "required"></div>
    <div id="treasury_contents">Treasury Content</div>
    <div id="wonder">Wonders</div>
    <div id="civillian_structures">Civillian Structures</div>
    <div id="commercial_structures">Commercial Structures</div>
    <div id="guilds">Guilds</div>
    <div id="scientific_structures">Scientific Structures</div>   
</html>

Here is my CSS:

div{
    height: 100px;
    width: 600px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 2px 2px 5px gray;   
}

input{
    position: relative;
    display:block;
    float: right;
    margin-top: auto;
    padding: 0px;
}

#millitary_conflict{
    background-color: #FF6666;
}

#treasury_contents{
    background-color: #FFFFCC;
}

#wonder{
    background-color: #FFD633;
}

#civillian_structures{
    background-color: blue;
}

#commercial_structures{
    background-color: #FFFF66;
}

#guilds{
    background-color: purple;
}

#scientific_structures{
    background-color: green;
}

Thank you ahead of time for your help, im still learning!

Upvotes: 1

Views: 8194

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

Simply add top: 50% and transform: translateY(-50%) to input.

What this will do is:

  1. transform: translateY(-50%) will move the input element to its top, half of its height.

    enter image description here

  2. top: 50% will center the input element.

    enter image description here

div {
  height: 100px;
  width: 600px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 2px 2px 5px gray;
}
input {
  position: relative;
  display: block;
  float: right;
  margin: auto;
  padding: 0px;
  top: 50%;
  transform: translateY(-50%);
}
#millitary_conflict {
  background-color: #FF6666;
}
#treasury_contents {
  background-color: #FFFFCC;
}
#wonder {
  background-color: #FFD633;
}
#civillian_structures {
  background-color: blue;
}
#commercial_structures {
  background-color: #FFFF66;
}
#guilds {
  background-color: purple;
}
#scientific_structures {
  background-color: green;
}
<div id="millitary_conflict">Millitary Conflict
  <input type="number" value="0" "required">
</div>
<div id="treasury_contents">Treasury Content</div>
<div id="wonder">Wonders</div>
<div id="civillian_structures">Civillian Structures</div>
<div id="commercial_structures">Commercial Structures</div>
<div id="guilds">Guilds</div>
<div id="scientific_structures">Scientific Structures</div>

Upvotes: 1

Related Questions