Member Avatar for cristian.stilpeanu.3

Hi, i have problem whit a border, i want to set to center but make's higher column when it's to the center, please help me.

there it's the original code:
saveus

<label for="">Nume de utilizator: *</label> 
<input class="bar curved5" name="user" type="text" 
id="user" 
maxlength="16" 
value="" 
onFocus="change(1)" 
class="validate[required,custom[noSpecialCharacters],length[5,16]]"
/>

there it's the modify code:
saveus1

 <label for="">Nume de utilizator: *</label> 


<div align="center">


<input class="bar curved5" name="user" type="text" 
id="user" 
maxlength="16" 
value="" 
onFocus="change(1)" 
class="validate[required,custom[noSpecialCharacters],length[5,16]]"
/>  


</div>

there it's how i want:
saveus2

  • 4 Contributors
  • 9 Replies
  • 530 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by cmps

Dani AI

Generated

A concise, modern fix that keeps the label left and the input visually centered uses CSS Grid (or Flexbox) instead of <center>, inline align attributes or float hacks. 's <center> is deprecated; was right that vertical alignment matters; and 's float approach is fine — the snippet below gives the same result in a cleaner, responsive way and avoids altering column height.

<!-- HTML -->
<div class="form-row">
  <label for="user">Nume de utilizator: *</label>
  <div class="input-wrap">
    <input id="user" name="user" type="text" maxlength="16" class="bar curved5 validate">
  </div>
</div>

/* CSS */
.form-row {
  display: grid;
  grid-template-columns: 200px 1fr; /* left label column + fluid right column */
  align-items: center;               /* vertical centering */
  column-gap: 12px;
}
.input-wrap {
  display: flex;
  justify-content: center;           /* centers the input inside the right column */
}
.input-wrap input {
  width: 320px;
  max-width: 100%;
  box-sizing: border-box;
  height: 3rem;                      /* match the visual size used earlier */
}

Notes and troubleshooting:

  • Combine multiple classes into a single class attribute (the original had two class= attributes).
  • align-items: center avoids line-height hacks and stops the row from becoming taller when centering.
  • Adjust the 200px column and 320px input width to match the layout; use max-width:100% for mobile.
  • For older browsers that lack Grid support, use Flexbox or an inline-block fallback with vertical-align: middle.

This keeps the label clickable (matching for/id), is accessible, and is easier to maintain than floats or deprecated tags.

Recommended Answers

All 9 Replies

Member Avatar for stultuske

have you tried:

<center>

<input class="bar curved5" name="user" type="text" 
id="user" 
maxlength="16" 
value="" 
onFocus="change(1)" 
class="validate[required,custom[noSpecialCharacters],length[5,16]]"
/>  

</center>

?

Member Avatar for AleMonteiro

I'd make the <label> have the same height and line-height of the input, and use margin to create the space between them.

Member Avatar for cmps

Dear cristian.stilpeanu.3, may you try this:

<div align="center" style="height:3em">
    <label for="">Nume de utilizator: *</label>
    <input class="bar curved5" name="user" type="text" id="user" maxlength="16" value="" onFocus="change(1)" class="validate[required,custom[noSpecialCharacters],length[5,16]]" />
</div>
Member Avatar for cristian.stilpeanu.3

saveus10

Edited by cristian.stilpeanu.3
Member Avatar for cmps

The prob is that the text should be on the left and the input in the middle ?
if yes, here's the code:
try it:

<div style="height:4em; width:100%;">
    <div style="height:100%; width:40%; float:left; line-height:3em;">
        <label for="">Nume de utilizator: *</label>
    </div>    
    <div style="width:100%;" align="left" style="float:right;">   
        <input onfocus="change(1)" value="" maxlength="16" id="user" name="user" style="height:3em" class="bar curved5" type="text">
    </div>
</div>
Member Avatar for cristian.stilpeanu.3

thank you very much amirbwb it works!

i edit height:4em whit height:3em and it's perfect.

Edited by cristian.stilpeanu.3
Member Avatar for cmps

You are welcome :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.