What is the modern way of vertically centering a form inside a floated div of a varying height without using javascript?
What I'm trying to do:
Vertically center the form in the left div. The height of that div should be dependent on the height of the right div which can change depending on the text contained therein.
What I want:
A modern solution that doesn't resort to using JavaScript. There are many JavaScript-free approaches but as soon as you factor in floated divs and dynamic heights that list dramatically shrinks. I haven't found a working solution yet, yet alone a modern one.
Here's the jsfiddle (but I suggest using the raw code):
pshpV
Here's the raw code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
margin: 10px;
padding: 10px;
background: #293134;
color: #E0E2E4;
border: 1px solid #93C763;
}
#container
{
overflow: hidden;
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #678CB1;
}
#left
{
float: left;
width: 568px;
padding: 10px;
开发者_开发问答 border: 1px solid #FFCD22;
}
#right
{
float: left;
width: 200px;
margin-left: 10px;
padding: 10px;
border: 1px solid #EC7600;
}
#container, #left, #right
{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<form>
<input type="text" name="keyword" required placeholder="keyword" />
<input type="submit" value="search" />
</form>
</div>
<div id="right">
<h1>foo</h1>
<h2>bar</h2>
<h3>baz</h3>
</div>
</div>
</body>
</html>
Hindsights:
As far as I know, the only way the table approach works is by removing the floats. It also appears that I apparently don't even need the floats. Regardless, I would still like to discover the answer my question.
Not quite sure exactly how you want everything but you could try fiddling about with the display:table / table-cell and then vertical-align. However, IE has issues with these properties. <= IE7 I think
Edit: I would go out on a limb here and say that what your asking is impossible. The trouble comes from the two requirements you are asking for combined - floating and dynamic heights.
Floating an element means that the parent element won't recognize its height, even if you float the parent element as well, it will stretch to the height of floating children but still won't have a recognized height. Therefore, trying center-aligning tactics like positioning relatively with top:50% won't work because the height is not recognized.
In all cases, the actual height of your elements in question will never be recognized because they are floating. You would have to specify heights to parent elements to get around that problem and this won't work in your case because that is another requirement of yours - dynamic heights.
加载中,请稍侯......
精彩评论