在内联块内垂直对齐一个div

我有一个未知数量的div将被填充在一个内联块div内。当有多个div时没有问题，因为它看起来很好，但是当只有一个div时，我希望它在父级中居中。我想尝试没有任何固定/绝对定位，希望不使用JavaScript。在内联块内垂直对齐一个div

在小提琴中您可以看到第一列，带有“放我中间”的div应该在中间。

<div class="inlineb"> 
    <div class="insideInline">Hello</div> 
</div> 
<div class="inlineb"> 
    <div class="insideInline">Hello</div> 
    <div class="insideInline">Hello</div> 
</div> 

.inlineb { 
    min-height:102px; 
    display:inline-block; 
    border:1px red solid; 
    vertical-align:top; 
} 
.insideInline { 
    height:50px; 
    border:1px solid blue; 
}

来源

2015-02-10 tdoakiiii

你不能用纯CSS和inline-block的元素，你将需要使用JS和CSS [显示：表格]（http://jsfiddle.net/Lzzyywf2/8/）（这是使用css在元素内垂直对齐的唯一方法） – Pete 2015-02-10 16:03:49

所以你的意思是水平居中div'.insideInline'，如果它是唯一元素父元素'.inlineb'？ – 2015-02-10 16:08:35

如果您使用了flexbox，您可以设置每个div的顺序。 http://jsfiddle.net/n9pkfq34/ – 2015-02-10 16:23:11

尝试:only-child对于.insideInline。如果父项中只有一个元素，则这将定位该元素。 Here's my fiddle。

#wrapper { 
} 
.inlineb { 
    min-height:102px; 
    display:block; 
    border:1px red solid; 
    vertical-align:top; 
    width:126px; /*or whatever value*/ 
} 
.insideInline { 
    height:50px; 
    border:1px solid blue; 
    display:inline-block; 
    width:37px;/*or whatever value*/ 
} 

.inlineb .insideInline:only-child { 
    display:block; 
    margin:0 auto; 
}

来源

2015-02-10 16:03:38

感谢独一无二的孩子很好，http://jsfiddle.net/2she499x/7/ – tdoakiiii 2015-02-10 16:40:53

如果能够以手动添加一个类的容器中只有一个孩子，这会工作：

http://jsfiddle.net/Lzzyywf2/6/

<div class="inlineb one-child"> 
    <div class="insideInline">Hello</div> 
</div>

结合：

.one-child:before { 
    content: ""; 
    display: block; 
    height: 25px; 
}

如果您不能添加一个类，这将在IE9 +工作：

http://jsfiddle.net/Lzzyywf2/9/

.insideInline:only-child { 
    display:block; 
    margin-top:25px; 
}

增光OP为改善这种想法！

来源

2015-02-10 16:03:37

没关系，只有FireFox对我很重要。唯一的孩子是我正在寻找，并以这种方式：http://jsfiddle.net/2she499x/7/ – tdoakiiii 2015-02-10 16:40:22

Flex的框将让您的生活更轻松：

.flex-contain{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    -ms-box-orient: horizontal; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -moz-flex; 
    display: -webkit-flex; 
    display: flex; 
    width:900px; 
    height:500px; 
    background:#000; 
    align-items:center; 
    align-content:center; 
    } 

    .flex-item { 
    height:200px; 
    width:200px; 
    background:yellow; 
    margin:0 auto; 
    }

http://codepen.io/cjthedizzy/pen/vEpyvR

来源

2015-02-10 16:31:01 ChrisJ

在内联块内垂直对齐一个div

回答

相关问题