# react-inline-center

> Centering inline elements like magic

Latest version **1.0.4** (published 2025-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-inline-center
pnpm add react-inline-center
yarn add react-inline-center
bun add react-inline-center
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2025-07-02 |
| First published | 2021-01-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ambarli |

## Links

- npm: https://www.npmjs.com/package/react-inline-center
- Repository: https://github.com/ambar/react-inline-center
- Homepage: https://github.com/ambar/react-inline-center#readme
- Issues: https://github.com/ambar/react-inline-center/issues
- npm.io page: https://npm.io/package/react-inline-center

## Recent versions

- 1.0.4 (latest) — 2025-07-02
- 1.0.3 — 2024-04-27
- 1.0.2 — 2024-03-28
- 1.0.1 — 2021-10-21
- 1.0.0 — 2021-01-23

## README

# react-inline-center

[![npm version](https://badgen.net/npm/v/react-inline-center)](https://www.npmjs.com/package/react-inline-center)
[![minzipped size](https://badgen.net/bundlephobia/minzip/react-inline-center)](https://bundlephobia.com/result?p=react-inline-center)
![module](https://badgen.net/badge/module/esm,cjs?list=1)

Centering inline elements like magic:
- No need to add the wrapper element
- The child element (image, icon etc.) can be any size
- Only align to the first line of adjacent text

## Install

```
npm install react-inline-center
```

## Demo

- https://stackblitz.com/~/github.com/ambar/react-anything
- https://codesandbox.io/s/react-inline-center-hu81q

## Usage

```js
import InlineCenter from 'react-inline-center'

render(
  <>
    <Button>
      <InlineCenter>
        <MyIcon />
      </InlineCenter>
      label.
    </Button>
    <p>
      <InlineCenter>
        <image />
      </InlineCenter>
      text.
    </p>
  </>
)
```

---
_Source: https://npm.io/package/react-inline-center · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._