Div並非水平對齊

Question

我有兩個<div> s，我試圖水平對齊它們。但是有一些對齊問題。我怎樣才能解決這個問題？

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

根據我的看法，應該正常工作。但第二種看法似乎低於第一個<div>。他們沒有正確對齊。

Answer 1

請參見下面的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; 
} 

Answer 2

父DIV使用display:flexhttps://jsfiddle.net/Lpjxse6L/

Answer 3

https://jsfiddle.net/k4wgd8gk/

見上面的例子..

你提到的屬性錯誤。

<div className="info_label">這是正確的格式class屬性

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

Answer 4

這是你需要什麼，我已經加入display:inline-block和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 5

當我從控制檯 我發現它看起來像按您的要求添加CSS display: inline-block;到.info_label 升，
請檢查此，。

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

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

這是工作，只要你想瞧一瞧！