CODEWITHSUNDEEP
csshtmlinputtextbox
NoobxCamper
NoobxCamper

Reputation: 33

Centering a textbox in HTML

I am making a website and I am trying to center a text box on my website. I tried everything and nothing seems to work. I need to have it centered so it looks good on the mobile view as well.

I looked at this thread

CSS / HTML centering a textbox

And I tried the solutions in it, but nothing worked.

Here is my code for the text box that I am trying to center. Please keep in mind I am not trying to center the text inside, I want the entire text box centered.

.imgUrlText
{
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    font-variant: normal;
    font-weight: bold;
}

<input type = "text" class = "imgUrlText" size = "70" id = "urlText" placeholder = "Image Url">

Any help would be appreciated thanks.

Upvotes: 1

Views: 15373

Answers (6)

Prabhat-VS
Prabhat-VS

Reputation: 1530

.imgDiv {
    width:400px;
    height:50px;
    background-color: #A12A1E;
    color:White;
    margin:0 auto;
}

.imgDiv > div {
    margin:0 auto;
    width:250px;
}

input[type="text"] {
    margin:10px auto;
}
<div class="imgDiv">
  <div>
<input type = "text"  size = "30" id = "urlText" placeholder = "Image Url">
    </div>
</div>

Upvotes: 0

luke mclean
luke mclean

Reputation: 358

Simplest way.

.imgUrlText {
    display: block;
    margin: 0 auto;
}

https://jsfiddle.net/3e8bxhmg/

Don't use <center> this is depreciated https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

Upvotes: 0

Julia
Julia

Reputation: 1321

Wrap it in a div with text align center:

.imgUrlText
{
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    font-variant: normal;
    font-weight: bold;
    margin: 0 auto;
}

.center {
  text-align: center;
}
<div class="center">


<input type = "text" class = "imgUrlText" size = "70" id = "urlText" placeholder = "Image Url">

</div>

Upvotes: 0

SUBHUMAN
SUBHUMAN

Reputation: 378

In modern browsers that support CSS 3 you can do an easy centering using these three lines of code:

position: absolute;
left: 50%;
transform: translateX(-50%);

The magic trick is in the transform: translatex(-50%); part.
Usual CSS positions your element at the top left corner of the box.
The translate now subtracts the element's width from this position which leads to a centering of the element since left: 50% is the horizontal center of the viewport.

position: absolute is required for it to work!

Here's a fiddle

Upvotes: 0

Donutface007
Donutface007

Reputation: 11

You could also do it within the html by putting center tags around it like so:

 <center><input type = "text" class = "imgUrlText" size = "70" id = "urlText" placeholder = "Image Url"></center>

But that could be a rather inefficient method if you have multiple input boxes.

Upvotes: 1

Roy
Roy

Reputation: 8089

You can do it in multiple ways.

With a fixed width of the textbox:

.imgUrlText {
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-variant: normal;
  font-weight: bold;
  margin: 0 auto;
  display: block;
  width: 500px;
}
<input type="text" class="imgUrlText" size="70" id="urlText" placeholder="Image Url">

Not with a fixed width of the textbox:

Wrap a div around with text-align: center;.

.aligncenter {
  width: 100%;
  text-align: center;
}

.imgUrlText {
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-variant: normal;
  font-weight: bold;
  display: inline-block;
}
<div class="aligncenter">
<input type="text" class="imgUrlText" size="70" id="urlText" placeholder="Image Url">
</div>

Upvotes: 0

Related Questions