Question 256730 in Html Question posted in
Some basic documentation can be found here.

Html – text-align center does not work on input tag

I have created a div which contains elements – img, btn and input. When I apply text-align center on the .main container, all the elements except the input tage does not get align in the center

It works well when i apply margin:0 auto

.main {
  margin-top: 100px;
  text-align: center;
}

.logo-img {
  /* display: block; */
  width: 300px;
  margin-bottom: 20px;
  /* margin-left: auto;
    margin-right: auto; */
}

.search-input {
  display: block;
  max-width: 400px;
  /* margin-left: auto;
    margin-right: auto; */
  line-height: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
}

.btn {
  margin-top: 30px;
  background: #dfe1e5;
  border: none;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 4px;
  font-size: 14px;
}
<html>

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="main">
    <img class="logo-img" src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80" />
    <input class="search-input" type="text" />
    <button class="btn">Google Search</button>
    <button class="btn">I'm Feeling Lucky</button>
  </div>
</body>

</html>
Tags:

2

Answers


  1. 0 
    .main {
    margin-top: 100px;
    text-align: center;    
}

    Do this instead

    .main {
    margin-top: 100px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
    Login or Signup to reply.
  2. 0

    If you want to align text into input tag you need to declare type of input…

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

    Or in you case

       .search-inpu[type="text"]
{
    text-align: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search