Html 未水平对齐的div

我有两个s，我正试图将它们水平对齐。但也存在一些对齐问题。我怎样才能解决这个问题

.info{ 边缘顶部：50px； 左：1%； 字体大小：12px； 位置：绝对位置； } .info_标签{ 右边距：15px； 边缘底部：10px； 宽度：40%； 填充：0； 浮动：左； 背景颜色：黄色； 位置：相对位置； } .info\u数据\u标签{ 右边距：10px； 边缘底部：10px； 宽度：50%； 填充：0； 背景颜色：黄色； 浮动：对； 位置：相对位置； } j{ 浮动：左； } 性别 男性的 生日 1992-05-23 在父div上使用display:flex

请参见上面的示例

你被提到的属性是错误的

这是正确的格式类属性吗

.info{ 边缘顶部：50px； 左：1%； 字体大小：12px； } .info_标签{ 右边距：15px； 边缘底部：10px； 填充：0； 浮动：左； 背景颜色：黄色； } .info\u数据\u标签{ 右边距：10px； 边缘底部：10px； 填充：0； 背景颜色：黄色； } 性别 男性的 生日 1992-05-23

---

这就是你需要的，我添加了显示：内联块和文本对齐：中心

当我添加CSS显示时：内联块；从控制台转到.info_标签和.info_数据_标签 我发现它看起来像是按照你的要求， 请检查这个

.info_label {
      margin-right: 15px;
      margin-bottom: 10px;
      width: 40%;
      padding: 0;
      float: left;
      background-color: yellow;
      position: relative;
      display: inline-block;
}
.info_data_label {
      margin-right: 10px;
      margin-bottom: 10px;
      width: 50%;
      padding: 0;
      background-color: yellow;
      float: right;
      position: relative;
      display: inline-block;
}

---

请看下面的CSS，我只把边距改成%，因为你给的是%的宽度，而边距是像素

.info {
  margin-top: 50px;
  padding-left: 1%;
  font-size: 12px;
  position: absolute;
}
.info_label {
  margin-right: 5%;
  margin-bottom: 10px;
  width: 40%;
  padding: 0;
  float: left;
  background-color: yellow;
  position: relative;
}
.info_data_label {
  margin-right: 5%;
  margin-bottom: 10px;
  width: 50%;
  padding: 0;
  background-color: yellow;
  float: right;
  position: relative;
}
.j {
  float: left;
}

---

这是你想要的，伙计

你为什么写className而不是class？CSS不是以这种方式应用的。我使用的reactAttribute类名不正确…请参阅fiddle链接

.info {
  margin-top: 50px;
  padding-left: 1%;
  font-size: 12px;
  position: absolute;
}
.info_label {
  margin-right: 5%;
  margin-bottom: 10px;
  width: 40%;
  padding: 0;
  float: left;
  background-color: yellow;
  position: relative;
}
.info_data_label {
  margin-right: 5%;
  margin-bottom: 10px;
  width: 50%;
  padding: 0;
  background-color: yellow;
  float: right;
  position: relative;
}
.j {
  float: left;
}

.info {
  margin-top: 50px;
  padding-left: 1%;
  font-size: 12px;
  display : inline;

.j {
  float: left;
}

<div className="info" >
      <div className="info" >
      <label className="j">Gender</label>
      <label className="j">Male</label> <br/>
      <label className="j">Birthday</label>
      <label className="j">1992-05-23</label>
</div>