当flexbox和经典技术不工作时

当flexbox和经典技术不工作时

本文介绍了当flexbox和经典技术不工作时,集中inline-block元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在页面



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



它们都是.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元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 02:47