Divs not horizontally aligned

Question

I have two <div> s and I'm trying to align them horizontally. But there are some alignment issues. How can I fix this?

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

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

According to my view it should work correctly. But the second view appears lower to the first <div> . They are not correctly aligned.

Answer 1

.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>

This is working as you want dude!

Answer 2

Please see below CSS, I have only change the margin-right into %, as you are giving the width in % but the margin in pixels.

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

Answer 3

is this what you need , i have added display:inline-block and text-align:center;

.info {
   margin-top: 50px;
   padding-left: 1%;
   font-size: 12px;
   text-align:center;
}
.info_label {
   margin-right: 15px;
   margin-bottom: 10px;
   padding: 0;
   display:inline-block;
   background-color: yellow;
}
.info_data_label {
   margin-right: 10px;
   margin-bottom: 10px;
   padding: 0;
   background-color: yellow;
   display:inline-block;

}

https://jsfiddle.net/k4wgd8gk/1/

Answer 4

when i added the CSS display: inline-block; to the .info_label & .info_data_labe l from the console i found it look a like as per your requirement,
Please check this,.

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

Answer 5

在父div上使用display:flex https://jsfiddle.net/Lpjxse6L/

Answer 6

https://jsfiddle.net/k4wgd8gk/

See the above example..

you are mentioned the attribute wrong.

<div className="info_label"> Is this correct format class attribute

 .info { margin-top: 50px; padding-left: 1%; font-size: 12px; } .info_label { margin-right: 15px; margin-bottom: 10px; padding: 0; float: left; background-color: yellow; } .info_data_label { margin-right: 10px; margin-bottom: 10px; padding: 0; background-color: yellow; } 

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