Ubuntu - input box not centering

anonymous
August 4, 2022
188 views
3 votes
5 Answers

For some reason, my website isn’t centering an input box. Code:

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

body { background-color: black; }

#textInput {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    
    <title>Digturd.io</title>
</head>
<body>
    <input id="textInput" type="text">
</body>
</html>

The textbox I created is, for some reason, not centered into body. Is there any reason why?
Codepen: https://codepen.io/ARandomUncreativeName123/pen/oNqqeoY

Answers

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

body { background-color: black; }

#textInput {
    position: absolute;
    top: 50%;
    left: 50%;
  width: 300px;
  transform: translate(-50%,-50%)
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    
    <title>Digturd.io</title>
</head>
<body>
    <input id="textInput" type="text">
</body>
</html>

Just replace right: 50% to left: 50% and add transform.

#textInput {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    transform: translate(-50%,-50%)
}

You can use this technique if it fits.

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

body { background-color: black; }

.center{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#textInput {
    position: absolute;
  width: 300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    
    <title>Digturd.io</title>
</head>
<body>
  <div class="center">
    <input id="textInput" type="text">
  </div>
</body>
</html>

Since you want to center this in the body use vh and vw it will calculate using the width of the viewport, also set the height and width of the html and body tag using viewport height and width.

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

html, body { background-color: black; width:100vw; height:100vh; margin: 0; }

#textInput {
    position: absolute;
    top: 50vh;
    right: calc(50vw - 150px);
    width: 300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    
    <title>Digturd.io</title>
</head>
<body>
    <input id="textInput" type="text">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    
    <title>Digturd.io</title>
</head>
<body>
    <input id="textInput" type="text">
</body>
</html>

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

body { 
background-color: black;
margin: 0px;
padding: 0px;
}

#textInput {
    position: absolute;
    top: 50%;
    left: calc(50% - 150px);
    width: 300px;
}

- SumanParajuli
- August 4, 2022 at 6:47 am
- 0 votes
0
The Simplest way to center something horizontally is using the text-align: center property to the parent element.
```
<div class="textInputDiv">
   <input id="textInput" type="text">
</div>
```
And apply this css over it in which text-align: center property will ensure it’s child is in center horizontally. And position: absolute; top: 50%; will center your input box vertically.
```
body { background-color: black; }

.textInputDiv{
   text-align: center;
   height: 100vh;
   width: 100%;
   position: absolute;
   top: 50%;
}
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Ubuntu – input box not centering

Answers