当flexbox和经典技术不工作时，集中inline-block元素 [英] centering inline-block elements when flexbox and classic techniques don't work

问题描述

在这里：https://irfan.io 页面

我已经尝试以每个方向为中心的小圆圈，我可以想到，他们或者没有集中或中心是不响应 - 意味着当视口更改时失败。

它们都是.small类，它们是#main的子级。

我试过flexbox：

  #main {
 display：flex; 
 align-items：center; 
 justify-content：center; 
} 
 .small {
 display：flex; 
} 
  

我试过在一个容器中包装.small元素，固定宽度和中心与-0.5的宽度：

  #smallContainer {
 width：500px; 
 margin-left：-250px; 
 position：relative; 
 left：50％; 
} 
  

我还认为，因为它们是inline-block元素，我可以使用 text-align：center; 在.small元素上，但是不起作用。

  #small {
 text-align：center; 
} 
  

我似乎无法弄清楚如何居中3个小圆圈中间的一个是在垂直中间像更大的圆圈（.big），我使用第二种技术集中。

有没有任何想法，如何做

$ <$> HTML：

 < div id =main> 
< div id =smallContainer> 
< div class =small> 
 text 
< / div> 
 
< div class =small> 
 text 
< / div> 
 
< div class =small> 
 text 
< / div> 
< / div> 
< / div> 
  

CSS：

  #main {
 display：flex; 
 align-items：center; 
 justify-content：center; 
 position：relative; 
} 
 .small {
 display：flex ;. 
 text-align：center; 
 display：inline-block; 
 width：100px; 
 height：100px; 
 border：1px solid black; 
} 
 #smallContainer {
 margin-left：0 auto; 
 position：relative; 
} 
  

这里

我做的只是简单..只是使#main和#smallContainer位置相对，从#smallContainer删除左和宽让它只根据它的孩子展开，然后放上margin：0 auto;到#smallContainer。

EDIT

我更新了小提琴，我删除了显示：inline-block;从.small在css。

不要忘记标记为答案，如果它给你你需要我的朋友：）

In the page here: https://irfan.io

I have tried centring the smaller circles every-way I can think of and they either don't get centred or the centring is not responsive-- meaning it fails when the viewport is changed.

They are all of class .small and they are children of #main.

I have tried flexbox:

#main{
    display:flex;
    align-items:center;
    justify-content:center;
}
.small{
    display:flex;
}

I have tried giving wrapping the .small elements in a container and giving that a fixed width and centring with -0.5 of the width:

#smallContainer{
    width:500px;
    margin-left:-250px;
    position:relative;
    left:50%;
}

I also figured since they were inline-block elements I could use text-align:center; on the .small element, but that didn't work.

#small{
   text-align:center;
}

I can't seem to figure out how to centre 3 small circles so that the middle one is in the vertical-middle like the bigger circle ( .big ), which I centred using the 2nd technique.

Does anyone have any ideas on how to do this?

解决方案

you can try this:

HTML:

<div id="main">
    <div id="smallContainer">
        <div class="small">
            text
        </div>       

        <div class="small">
            text
        </div>       

        <div class="small">
            text
        </div>       
    </div>
</div>

CSS:

#main{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.small{
    display:flex;.
    text-align:center;
    display:inline-block;
    width:100px;
    height:100px;
    border:1px solid black;
}
#smallContainer{
    margin-left:0 auto;
    position:relative;
}

fiddle here

What i did is simple.. just make #main and #smallContainer position relative, remove the left and width from #smallContainer to make it expand only according to its children, then put margin:0 auto; to #smallContainer. This way even if the viewport change you're sure the .small div's are centered.

EDIT

I updated the fiddle, I just removed the display:inline-block; from .small in css.

Dont forget to mark this as answer if it gives you what you need my friend :)

这篇关于当flexbox和经典技术不工作时，集中inline-block元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！