Hello friends! I've been scouring Google and YouTube for a solution to my issue but no luck so far.
This is the first time I've encountered this problem. I want to align everything in the center, which it is, but there seems to be a vertical alignment issue with the paragraph and input text. They are not perfectly straight, even though they are centered. I'm aiming to achieve a neat layout for the text input like this:
Age: ______________
Year: ______________
Group: ______________
instead of the default center position like this:
Age: ______________
Year: ______________
Group: ______________
Here is my HTML and CSS code:
<html>
<head>
</head>
<body>
<div id="container">
<h3 class="header"> Welcome to the registration form </h3>
<div id="border"> </div>
<div id="box">
<p> Enter Name: <input class="in" type="text" name="name" value="${param.name}"> </p>
<p> Enter Age: <input class="in" type="text" name="name" value="${param.name}"> </p>
<p> Enter Address: <input class="in" type="text" name="name" value="${param.name}"> </p>
<p> Enter Phone: <input class="in" type="text" name="name" value="${param.name}"> </p>
</div><!--box -->
</div><!--container -->
</body>
</html>
And here is my CSS:
/*
Document : style
Created on : Jan 18, 2014, 9:53:43 AM
Author : will
Description:
Purpose of the stylesheet follows.
*/
*{
margin: 0px;
}
body{
background-color: black;
}
#container{
color: black;
margin: 50px auto;
border: solid black 2px;
text-align:center;
width: 700px;
height: 540px;
background-image: url('http://www.kodemi.com/images/full/2013/12/20/white-background-wallpaper-image-pics-hdwallpc-White-Background-Wallpaper-Image-Pics.jpg');
}
#block{
width: 300px;
color: black;
margin: 36px auto;
}
h3.header{
color: black;
font-size:25px;
margin: 30px 30px 5px;
}
#border{
width: 400px;
border-top: solid black 1px;
margin: auto;
}
#box p{
margin: 20px;
}
#box input{
margin-left: 10px;
}