How can i place "Comment:" on red line?

Question

How can I place "Comment:" on red line as shown in the above picture? I know it's a little bit of a silly question, but as a beginner it would be helpful for me. Here is a code snippet:

body {
  border: 1px solid black;
  height: 550px;
  width: 550px;
  padding: 5px;
}
h2 {
  text-align: center;
}

<h2>FeedBack Form</h2>
<strong>Name:</strong> 
<input type="text" />
<br>
<br>
<strong>Comment:</strong> 
<input type="text" style="height:100px; width:250px;" />
<br>
<br>
<strong>Email Address:</strong> 
<input type="text" />

comment on red line? could you please explain it a bit more clearly.. — Lal, Sep 29 '15 at 17:28
are you trying to add more text above that input field or put text inside that field? Or do you mean you want to move the text 'Comment:' to visually be where that red line is — PhilVarg, Sep 29 '15 at 17:29
Perhaps a duplicate of [this](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css)? — Tim S., Sep 29 '15 at 17:30

score 1 · Answer 1 · answered Sep 29 '15 at 17:31

try with this:

<strong>Comment:</strong> <input type="text" style="height:100px; width:250px; vertical-align:top;"/><br><br>

I just added vertical-align: top to you input text.

But as a suggestion, I think you may want to use textarea instead input text. And inline css styles is not a thing I would recommend.

score 1 · Accepted Answer · answered Sep 29 '15 at 17:33

1

See this fiddle

Please add vertical-align: text-top; or vertical-align: top; as style for the input.

Add the below given to your CSS

input[type="text"]{
        vertical-align: text-top;
}

answered Sep 29 '15 at 17:33

Lal

14,726
4
45
70

score 0 · Answer 3 · answered Sep 29 '15 at 17:30

0

Add vertical-align css property

<strong style="vertical-align: top;">Comment:</strong>

answered Sep 29 '15 at 17:30

rajuGT

6,224
2
26
44

score 0 · Answer 4 · answered Sep 29 '15 at 17:31

<html>
<head>
    <title>FeedBack Form</title>
    <style>
        body {
            border: 1px solid black;
            height:550px;
            width:550px;
            padding:5px;
        }
        h2 {
            text-align: center;
        }
    </style
</head>
<body>
<h2>FeedBack Form</h2>
<strong>Name:</strong> <input type="text" /><br><br>
<strong style="vertical-align: top;">Comment:</strong> <input type="text" style="height:100px; width:250px;"/><br><br>
<strong>Email Address:</strong> <input type="text" />
</body>
</html>

How can i place "Comment:" on red line?

4 Answers4

See this fiddle