CODEWITHSUNDEEP
htmlcsstext-alignment
RebeccaK375
RebeccaK375

Reputation: 901

How to align a text field with its title in HTML/CSS

enter image description here

The code below is producing the image above within a column:

  <div class="aParent">
      <div>
          <font size="8">Move:</font> 
      </div>
      <div style="float: left;">
          <input type="text" id="moveField"/>
      </div>
  </div>

Here is CSS:

I want it to look like this instead:

enter image description here

How do I align the two horizontally? So that "Move" is on the same line as the text field?

Upvotes: 0

Views: 490

Answers (7)

ruchi
ruchi

Reputation: 1

HTML

<div class="aParent">
      <div>
          <font size="6">Move:</font> 
          <input type="text" id="moveField"/>
      </div>
</div>

CSS

#moveField{
      width: 3em;
      height: 3em;
      padding-top: 1em;
      border: 4px solid lightskyblue;
}

Upvotes: 0

Ram Ratan Bairar
Ram Ratan Bairar

Reputation: 164

Just add display property to inline-block and give some height to input for align it to middle of text
`

<div class="aParent">
      <div style="display:inline-block">
          <font size="8">Move:</font> 
      </div>
      <div style="display: inline-block;">
          <input type="text" id="moveField"/>
      </div>
  </div>

`

Upvotes: 0

Chaitali
Chaitali

Reputation: 651

Try this css

.aParent {
    display: table;
}

.div1{
    display: table-cell;
}

.div2 {
    display: table-cell;
    vertical-align: middle;
}

Add classes to your divs:

 <div class="aParent">
      <div class="div1">
          <font size="8">Move:</font> 
      </div>
      <div class="div2">
          <input type="text" id="moveField"/>
      </div>
 </div>

Upvotes: 1

Abhishek Tyagi
Abhishek Tyagi

Reputation: 11

You can add some padding for input div.Example:

<div style="display: flex; flex-direction: row;" class="aParent">
  <div>
      <font size="8">Move:</font> 
  </div>
  <div style="padding-top: 25px;">
      <input type="text" id="moveField"/>
  </div>

Hope it helps.

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53684

If you want them to look like your screenshot, make the font sizes match. Also, the font element is deprecated, use CSS to change the font-size instead.

.move, #moveField {
  font-size: 3em;
}
<span class="move">Move:</span> <input type="text" id="moveField" value="text"  >

Upvotes: 1

Chris
Chris

Reputation: 678

Just put them in the same div

<div class="aParent">
      <div style="float: right;">
          <font size="8">Move:</font> <input type="text" id="moveField"/>
      </div>
</div>

Upvotes: 3

Sam Chahine
Sam Chahine

Reputation: 620

Add this to your .aParent class:

.aParent {
  display: flex;
  align-items: center;
}

You can change the font size to match the size of the box you want. :)

Upvotes: 2

Related Questions