如何在react中水平对齐2行？

在React中实现水平对齐两行的方法有多种。以下是其中一种常用的方法：

使用CSS Flexbox布局：Flexbox是一种强大的布局模型，可以轻松实现水平对齐。在React中，可以通过在父容器上应用flex布局来实现水平对齐。

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

const App = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="item">第一行文本</div>
        <div className="item">第二行文本</div>
      </div>
    </div>
  );
};

export default App;

.container {
  display: flex;
  justify-content: center;
}

.row {
  display: flex;
}

.item {
  margin: 0 10px;
}

在上面的代码中，.container 类应用了 display: flex 和 justify-content: center 属性，使其子元素在水平方向上居中对齐。.row 类应用了 display: flex 属性，使其子元素在水平方向上排列。.item 类设置了间距，可以根据需要进行调整。

使用CSS Grid布局：CSS Grid是另一种强大的布局模型，可以实现复杂的网格布局。在React中，可以通过在父容器上应用grid布局来实现水平对齐。

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

const App = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="item">第一行文本</div>
        <div className="item">第二行文本</div>
      </div>
    </div>
  );
};

export default App;

.container {
  display: grid;
  place-items: center;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

在上面的代码中，.container 类应用了 display: grid 和 place-items: center 属性，使其子元素在水平和垂直方向上居中对齐。.row 类应用了 display: grid 和 grid-template-columns 属性，使其子元素在水平方向上排列成网格。gap 属性设置了间距，可以根据需要进行调整。

以上是两种常用的方法，可以根据具体需求选择适合的方法来实现在React中水平对齐两行。