试图垂直对齐一个容器div中的两个浮动div div

我试图在标题下方浮动两个div彼此相邻。我尝试了内联块，但唯一的运气是让容器div显示：table和子div作为display：table-cell。我可以使用这种方法对齐两个div，但是现在我在“表格单元格”上方有一个大的边距或额外的填充。任何解决方案，以消除标题和子divs之间的额外保证金/填充？试图垂直对齐一个容器div中的两个浮动div div

如果有一个不使用display：table和display：table-cell的解决方案，我将非常感谢，因为我只是默认这个，因为我无法获得浮动或内联块与每个垂直对齐其他。

http://jsfiddle.net/jasonniebauer/GRS2k/

HTML

<div id="owner_headline"> 
    <h3> 
     Owner/Officer Information 
    </h3> 
    <p> 
     Second Owner/Officer (optional) 
    </p> 
</div> 
<div id="owner_info"> 
    <div id="owner_info1"> 
     <label for="owner_name"> 
     Name 
     </label> 
     <input type="text" id="owner_name" placeholder="Name"/> 
     <label for="home_address"> 
     Home Address 
     </label> 
     <input type="text" id="home_address" placeholder="Address"/> 
     <label for="owner_city"> 
     City 
     </label> 
     <input type="text" id="owner_city" placeholder="City"/> 
     <label for="owner_state"> 
     State 
     </label> 
     <input type="text" id="owner_state" placeholder="State"/> 
     <label for="owner_zip"> 
     Zip 
     </label> 
     <input type="text" id="owner_zip" placeholder="Zip"/> 
     <label for="owner_phone"> 
     Phone 
     </label> 
     <input type="text" id="owner_phone" placeholder="Phone"/> 
     <label for="ownership"> 
     Ownership 
     </label> 
     <input type="text" id="ownership" placeholder="Percentage"/> 
     <label> 
     % 
     </label> 
     <label for="ssn"> 
     SSN 
     </label> 
     <input type="text" id="ssn" placeholder="XXX-XX-XXXX"> 
    </div> 
    <div id="owner_info2"> 
     <label for="owner_name2"> 
     Name 
     </label> 
     <input type="text" id="owner_name2" placeholder="Name"/> 
     <label for="home_address2"> 
     Home Address 
     </label> 
     <input type="text" id="home_address2" placeholder="Address"/> 
     <label for="owner_city2"> 
     City 
     </label> 
     <input type="text" id="owner_city2" placeholder="City"/> 
     <label for="owner_state2"> 
     State 
     </label> 
     <input type="text" id="owner_state2" placeholder="State"/> 
     <label for="owner_zip2"> 
     Zip 
     </label> 
     <input type="text" id="owner_zip2" placeholder="Zip"/> 
     <label for="owner_phone2"> 
     Phone 
     </label> 
     <input type="text" id="owner_phone2" placeholder="Phone"/> 
     <label for="ownership2"> 
     Ownership 
     </label> 
     <input type="text" id="ownership2" placeholder="Percentage"/> 
     <label> 
     % 
     </label> 
     <label for="ssn"> 
     SSN 
     </label> 
     <input type="text" id="ssn2" placeholder="XXX-XX-XXXX"> 
    </div> 
</div>

的CSS

#owner_headline { 
    background-color: #000B84; 
} 

    #owner_headline h3 { 
     background-color: #000B84; 
     padding-left: 7rem; 
     padding-top: .5rem; 
     padding-bottom: .5rem; 
     font-family: "Bank Gothic", serif; 
     font-size: 24px; 
     display: inline-block; 
     color: #FFFFFF; 
    } 

    #owner_headline p { 
     font-family: Arial, sans-serif; 
     font-style: italic; 
     font-size: 17px; 
     font-weight: bold; 
     display: inline-block; 
     padding-top: 0; 
     padding-bottom: 0; 
     float: right; 
     padding-right: .1rem; 
     padding-top: .25rem; 
     margin-right: 1rem; 
     color: #FFFFFF; 
    } 

#owner_info { 
    width: 912px; 
    display: table; 
} 

#owner_info1 { 
    width: 446px; 
    display: inline-block; 
    border: 1px solid black; 
    float: left; 
    display: table-cell; 
} 

#owner_info2 { 
    display: table-cell; 
} 

    #owner_info1 label, 
    #owner_info2 label { 
     font-size: 14px; 
    } 

    #owner_info1 input, 
    #owner_info2 input { 
     display: inline-block; 
     margin-bottom: 1rem; 
    } 

#owner_info2 { 
    margin-left: 1rem; 
    width: 446px; 
    display: inline-block; 
    border: 1px solid black; 
    float: left; 
} 

    #owner_info1 input:nth-of-type(1), 
    #owner_info2 input:nth-of-type(1) { 
     width: 400px; 
    } 

    #owner_info1 input:nth-of-type(2), 
    #owner_info2 input:nth-of-type(2) { 
     width: 344px; 
    } 

    #owner_info1 input:nth-of-type(3), 
    #owner_info2 input:nth-of-type(3) { 
     width: 169px; 
    } 

    #owner_info1 input:nth-of-type(4), 
    #owner_info2 input:nth-of-type(4) { 
     width: 184px; 
    } 

    #owner_info1 label:nth-of-type(4), 
    #owner_info1 label:nth-of-type(6), 
    #owner_info1 label:nth-of-type(9), 
    #owner_info2 label:nth-of-type(4), 
    #owner_info2 label:nth-of-type(6), 
    #owner_info2 label:nth-of-type(9) { 
     margin-left: 1rem; 
    } 

    #owner_info1 input:nth-of-type(5), 
    #owner_info2 input:nth-of-type(5) { 
     width: 173px; 
    } 

    #owner_info1 input:nth-of-type(6), 
    #owner_info2 input:nth-of-type(6) { 
     width: 176px; 
    } 

    #owner_info1 input:nth-of-type(7), 
    #owner_info2 input:nth-of-type(7) { 
     width: 108px; 
    } 

    #owner_info1 input:nth-of-type(8), 
    #owner_info2 input:nth-of-type(8) { 
     width: 190px; 
    }

来源

2013-10-31 user2736472

可能重复http://stackoverflow.com/questions/3898230/css-center-vertically-in-2 -floated-divs） – Shikiryu

很难理解你在问什么。你能告诉我问题是什么吗？所以我可以帮助你。 – 2013-10-31 15:43:19

由于缺乏空间，标题中的段落被推下，导致空间不足。把你的标题和桌子一样宽。 – TreeTree

试试这个：

HTML：

<div id="owner_headline"> 
    <div> 
     <h3> Owner/Officer Information </h3> 
     <p> 
      Second Owner/Officer (optional) 
     </p> 
    </div> 
    <span style="clear:both;"></span> 
    <div id="owner_info1"> 
     <label for="owner_name"> Name </label> 
     <input type="text" id="owner_name" placeholder="Name"/> 
     <label for="home_address"> Home Address </label> 
     <input type="text" id="home_address" placeholder="Address"/> 
     <label for="owner_city"> City </label> 
     <input type="text" id="owner_city" placeholder="City"/> 
     <label for="owner_state"> State </label> 
     <input type="text" id="owner_state" placeholder="State"/> 
     <label for="owner_zip"> Zip </label> 
     <input type="text" id="owner_zip" placeholder="Zip"/> 
     <label for="owner_phone"> Phone </label> 
     <input type="text" id="owner_phone" placeholder="Phone"/> 
     <label for="ownership"> Ownership </label> 
     <input type="text" id="ownership" placeholder="Percentage"/> 
     <label> % </label> 
     <label for="ssn"> SSN </label> 
     <input type="text" id="ssn" placeholder="XXX-XX-XXXX"> 
    </div> 

    <span style="clear:both;"></span> 

    <div id="owner_info2"> 
     <label for="owner_name2"> Name </label> 
     <input type="text" id="owner_name2" placeholder="Name"/> 
     <label for="home_address2"> Home Address </label> 
     <input type="text" id="home_address2" placeholder="Address"/> 
     <label for="owner_city2"> City </label> 
     <input type="text" id="owner_city2" placeholder="City"/> 
     <label for="owner_state2"> State </label> 
     <input type="text" id="owner_state2" placeholder="State"/> 
     <label for="owner_zip2"> Zip </label> 
     <input type="text" id="owner_zip2" placeholder="Zip"/> 
     <label for="owner_phone2"> Phone </label> 
     <input type="text" id="owner_phone2" placeholder="Phone"/> 
     <label for="ownership2"> Ownership </label> 
     <input type="text" id="ownership2" placeholder="Percentage"/> 
     <label> % </label> 
     <label for="ssn"> SSN </label> 
     <input type="text" id="ssn2" placeholder="XXX-XX-XXXX"> 
    </div> 
</div>

这是CSS：

body { 
    width: 912px; 
} 
#owner_headline { 
    background-color: #000B84; 
} 

#owner_headline h3 { 
    margin: 0 80px; 
    font-family: "Bank Gothic", serif; 
    font-size: 24px; 
    display: inline-block; 
    color: #FFFFFF; 
} 

#owner_headline p { 
    margin: 0 65px; 
    font-family: "Bank Gothic", serif; 
    font-size: 24px; 
    font-weight: bold; 
    display: inline-block; 
    padding-top: 0; 
    padding-bottom: 0; 
    color: #FFFFFF; 
} 

#owner_info { 
    width: 912px; 
    display: table; 
} 

#owner_info1 { 
    width: 446px; 
    display: inline-block; 
    border: 1px solid black; 
    float: left; 
    display: table-cell; 
} 

#owner_info2 { 
    display: table-cell; 
} 

#owner_info1 label, #owner_info2 label { 
    font-size: 14px; 
} 

#owner_info1 input, #owner_info2 input { 
    display: inline-block; 
    margin-bottom: 1rem; 
} 

#owner_info2 { 
    margin-left: 1rem; 
    width: 446px; 
    display: inline-block; 
    border: 1px solid black; 
    float: left; 
} 

#owner_info1 input:nth-of-type(1), #owner_info2 input:nth-of-type(1) { 
    width: 400px; 
} 

#owner_info1 input:nth-of-type(2), #owner_info2 input:nth-of-type(2) { 
    width: 344px; 
} 

#owner_info1 input:nth-of-type(3), #owner_info2 input:nth-of-type(3) { 
    width: 169px; 
} 

#owner_info1 input:nth-of-type(4), #owner_info2 input:nth-of-type(4) { 
    width: 184px; 
} 

#owner_info1 label:nth-of-type(4), #owner_info1 label:nth-of-type(6), #owner_info1 label:nth-of-type(9), #owner_info2 label:nth-of-type(4), #owner_info2 label:nth-of-type(6), #owner_info2 label:nth-of-type(9) { 
    margin-left: 1rem; 
} 

#owner_info1 input:nth-of-type(5), #owner_info2 input:nth-of-type(5) { 
    width: 173px; 
} 

#owner_info1 input:nth-of-type(6), #owner_info2 input:nth-of-type(6) { 
    width: 176px; 
} 

#owner_info1 input:nth-of-type(7), #owner_info2 input:nth-of-type(7) { 
    width: 108px; 
} 

#owner_info1 input:nth-of-type(8), #owner_info2 input:nth-of-type(8) { 
    width: 190px; 
}

[CSS中心垂直于2浮起的div]（的

来源

2013-10-31 23:26:22

试图垂直对齐一个容器div中的两个浮动div div

回答

相关问题