Question

有没有办法可以在Parent Div中垂直对齐3个子div？

这是我工作的概述结构。但我更喜欢你把jsfiddle看得更详细一些。

<div class="PARENT">
<div id="children" class="one"></div>
<div id="children" class="two"></div>
<div id="children" class="three"></div>
</div>

我尝试在父div中使用display:flex;然后vertical-align:middle;，但它没有用。

感谢您的帮助！谢谢！

的jsfiddle

http://jsfiddle.net/k7L0jg9w/4/

HTML

  <div class="two" id="children">
        <ul class="dd">
            <li><a href="#">Dropdown List</a>
                <ul class="dd-contents">
                    <li><a href="#">Leauge of Shadows</a></li>
                    <li><a href="#">Death Eaters</a></li>
                    <li><a href="#">Hail Hydra</a></li>
                </ul
            </li>
        </ul>


  </div>
  <div class="three" id="children">
    <ul>
        <li class="fb">
            <a href="#"><img src="facebook.png">Share</a>
        </li>
        <li class="tw">
            <a href="#"><img src="twitter.png">Tweet</a>
        </li>   
    </ul>
  </div>
</div>

CSS

.container {
height: 40px;
width: 100%;
display: flex;
vertical-align: middle;
background:#FFF;
position:relative;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
}

#children {
display: block;
float: left;
vertical-align: middle;
margin-top:auto;
margin-bottom:auto;
}

.one {
width: 40px;
padding:0 0 0 10px;
background-repeat: no-repeat;
background-position:0% 0%;
}

.one img {
width:40px;
height:40px;
}

.two ul li a{
text-decoration:none;
}

.three {
width: 350px;
}

.three ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: middle;
}

.three ul li {
display: inline-block;
margin:0 10px 0 0;
padding:8px 25px;
border-radius: 3px;

}

.three ul li a {
text-decoration: none;
font-weight: bold;
color:#FFF;
padding:0;
margin:0;
}

.fb {
background:#3B5998;
}

.tw {
background:#00aced;
}

/*remove this after font awesome installation*/
.fb img, .tw img {
width:14px;
height:auto;
margin:0;
padding:0;
}
/*remove this after font awesome installation*/

.two {
width: calc(100% - 410px);
color:#000;
margin:0 0 0 10px;
}

.two a {
color:#000;
}

.two ul {
list-style:none;
margin:0;
padding:0;
display:inline-block;
background:#FFF;
}

.two ul li {
margin:0;
padding:0;
vertical-align: middle;
background:#FFF000;
}

.two ul li a {
line-height:1.2em;
display:block;
padding:8px 13px;
margin:0;
}

.two ul li ul {
margin:0;
padding:0;
display:none;
}

.two ul li ul li {
background:#FFF;
padding:0;
}

.two ul li ul li a{
margin:0;
padding:8px 13px;
display:block;
}

.two ul li ul li a {
transition: all 0.2s ease;
}

.two ul li ul li a:hover {
background:#000;
color:#FFF;
}
.two ul li a, .two ul li ul li a  {
transition: all 0.2s ease;
}



.two ul li:hover ul {
display: inline-block;
position: absolute;
transition: all 0.2s ease;
}

垂直对齐Parent中的所有DIV（子）元素

0 个答案: