React中居中文本或图标

Question

尝试将图标放置在两个框的中心。感谢您的帮助。谢谢。

- Honey Singh

---

在起始元素上设置属性position: absolute;left:40%;，并在父级div上设置position:relative. - Anil kumar

@Anilkumar，我尝试过了，但它没起作用。 - Honey Singh

Answer 1

App.tsx

export default function App() {
  return (
    <Row>
      <Col>
        <div className="input-group">
          <Input
            type="text"
            className="custom-input origin"
            placeholder="Origin"
          />
          <img
            src="https://cdn-icons-png.flaticon.com/512/1828/1828961.png"
            alt="star"
            width="15"
            className="star"
          />
          <Input
            type="text"
            className="custom-input destination"
            placeholder="Destination"
          />
        </div>
      </Col>
    </Row>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.input-group {
  position: relative;
}

.input-group .custom-input {
  height: 3rem;
  letter-spacing: 1.5px;
  font-size: 12px;
  border-radius: 0px !important;
  padding-left: 10px;
}

.input-group .destination {
  position: absolute;
  left: 170px;
}

.star {
  z-index: 999;
  position: relative;
  left: -8px;
}

.autocomplete {
  padding: 0px;
  background-size: 17px 15px;
  position: absolute;
}

- Syaifal Illahi Refactory

Answer 2

由于使用了 Bootstrap，因此似乎可以将类 position-relative 添加到容器 div 中，并为图标添加 position-absolute top-50 start-50 translate-middle 。

在 codesandbox 上进行了分叉实时演示。

发布的 codesandbox 使用了reactstrap，但似乎未安装bootstrap，因此上述示例已安装该软件包。

虽然帖子标记有bootstrap-4，但安装的版本reactstrap似乎不支持它，因此此示例已安装了新版本的Bootstrap。如果需要bootstrap-4，则可能需要替换一些类名为自定义CSS。

还添加了一个自定义类以使图标具有更高的z-index：

.custom-icon {
  z-index: 2500;
}

import "./styles.css";
import { Row, Col, Input } from "reactstrap";

export default function App() {
  return (
    <Row>
      <Col>
        <div className="input-group position-relative">
          <Input type="text" className="custom-input" placeholder="Origin" />
          <Input
            type="text"
            className="custom-input"
            placeholder="Destination"
          />
          <img
            src="https://cdn-icons-png.flaticon.com/512/1828/1828961.png"
            alt="icon"
            width="15"
            className="position-absolute top-50 start-50 translate-middle custom-icon"
          />
        </div>
      </Col>
    </Row>
  );
}

- John Li

---

做得非常漂亮。我很感激你。非常感谢你的帮助。 - Honey Singh