css React中居中的文本或图标

dfty9e19  于 2023-02-01  发布在  React
关注(0)|答案(2)|浏览(130)

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

kmpatx3s

kmpatx3s1#

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;
}
yzuktlbb

yzuktlbb2#

因为这使用了 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>
  );
}

相关问题