How to align input in react js?

September 05, 2024

Hi Friends 👋,

Welcome To aHoisting!

To align input in center we can use margin: 0 auto; , for right input we can use margin-left: auto; margin-right: 0; , and for align input left we can use margin-left: 0; margin-right: auto;.It will align input in react js.

Today, I am going to show you, how to align input in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React from 'react';
import './App.css';

Step 3: Create a Component.

You can use className="center-input" to align input in react js.

 <div>
      <input type="text" id="name" placeholder="Enter your name" className="center-input"/>
      <input type="text" id="name" placeholder="Enter your name" className="right-input" />
      <input type="text" id="name" placeholder="Enter your name" className="left-input"/>
</div>

Align input example.

The below code is an example of a React. You have to import './App.css' and use margin: 0 auto; , for right input we can use margin-left: auto; margin-right: 0; , and for align input left we can use margin-left: 0; margin-right: auto; to align input in react js.

App.js

import React from 'react';
import './App.css'; 

const App = () => {
  return (
    <div>
      <input type="text" id="name" placeholder="Enter your name" className="center-input"/>
      <input type="text" id="name" placeholder="Enter your name" className="right-input" />
      <input type="text" id="name" placeholder="Enter your name" className="left-input"/>
    </div>
  );
};

export default App;

App.css


.center-input {
  display: block;
  margin: 0 auto;
  width: 200px;
}

.right-input {
  display: block;
  margin-left: auto;
  margin-right: 0;
  width: 200px;
}



.left-input {
  display: block;
  margin-left: 0;
  margin-right: auto;
  width: 200px;

}

In the above code example, I have used the margin-left: 0; margin-right: auto; to align input in react js.

Check the output of the above code.

All the best 👍