How to align image and text in same line in react?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To image and text in the same line in react with responsive, you have to use a flex with justify-content, and align-items css which will make the image and text side by side.

See a short example of the React image left text right.

<div class="container">
  <div class="side">
    <img alt="facebook" width="100%" src={facebook} />
  </div>
  <div class="side side-content-center">
    <div>
      <p>Align image and text in same line in html</p>
    </div>
  </div>
</div>

.container {
  display: flex;
  width: 300px;
}

.side {
  flex: 1;
  padding: 10px;
}

.side-content-center {
  display: flex;
  align-items: center;
}

In this article, I will show multiple examples of align images and text in the same line in react js.

1. Example of React image and text side by side
2. Example of React icon and text on the same line

Let’s start today’s tutorial example of text next to the image in react

Example of React image and text side by side

In this example, I used the image with text and align the image and text side by side using the css attributes.

To make align the image and text side by side, I going to use the following css which is provided by CSS.

1. display: flex and flex: 1 to make image and text side by side with responsive.
2. display: flex and align-items: center css for align image and text in the same line

To use the above class I will use css and react in this example to get image and text in the same line.

Let’s start coding for React image inline with text

App.js

import "./styles.css";
import facebook from "./images/facebook.jpg";

export default function App() {
  return (
    <div className="App">
      <div class="container">
        <div class="side">
          <img alt="facebook" width="100%" src={facebook} />
        </div>
        <div class="side side-content-center">
          <div>
            <p>Align image and text in same line in html</p>
          </div>
        </div>
      </div>
    </div>
  );
}

styles.css

.container {
  display: flex;
  width: 300px;
}

.side {
  flex: 1;
  padding: 10px;
}

.side-content-center {
  display: flex;
  align-items: center;
}

In this above example, I put image in left side and text in right side.

Here, I have provided code sandbox links for the above program for the image and text side-by-side using css in react. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

Example of React icon and text on the same line

In this example, I will align the icon and text in the same line, using custom css such as flex, justify-content, and align-items.

Above mentioned css attributes help you to align icons and text in the same line.

For icons, I have installed material icons if you also want to install use the below command.

npm install @mui/icons-material @mui/material @emotion/styled @emotion/react

App.js

import "./styles.css";
import AbcIcon from "@mui/icons-material/Abc";

export default function App() {
  return (
    <div className="App">
      <div class="container">
        <div class="side">
          <AbcIcon sx={{ fontSize: "100px" }} />
        </div>
        <div class="side side-content-center">
          <div>
            <p>Align image and text in same line in html</p>
          </div>
        </div>
      </div>
    </div>
  );
}

styles.css

.container {
  display: flex;
  width: 300px;
  border: 1px solid;
}

.side {
  flex: 1;
  padding: 10px;
}

.side-content-center {
  display: flex;
  align-items: center;
}

Here, I have provided code sandbox links for the above program for the icon and text side-by-side using css in react. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

All the best 👍