如何在窗口大小调整时保持元素居中

当我调整窗口大小时，两个框都保持左对齐，如图所示。如何在窗口大小调整时保持元素居中

如何将它们置于中心？

div { 
    position: relative; 
    outline: 1px dotted gray; 
} 

div #span1 { 
    background: green; 
    display: inline-block; 
    color: white; 
    padding: 30px 30px; 
} 
div #span2 { 
    background: green; 
    display: inline-block; 
    color: white; 
    padding: 20px 50px; 
} 
div .left { 
    position: relative; 
    left: 0; 
    top: 0; 
} 
div .right { 
    position: relative; 
    top: 0; 
}

*********** HTML ***********

<div> 
    <div class="two-columns"> 
    <span class="left" id="span1">1</span> 
    <span class="right" id="span2">2</span> 
</div>

来源

2014-05-01 Kartikey Tanna

text-align:center？ DEMO, + vertical align

display:inline-block;不display:flex;。也许你的标题问题应该被更新:)

对于display:flex;这将是：justify-content:center;DEMO

有关信息，在Flexbox的模型，margin:auto到verticaly中心元素是avalaible为水平居中DEMO CENTER x,y

来源

2014-05-01 14:02:09

哦！对不起！其实代码需要更新。感谢您的答案。但是我想要的是，当我把窗户放在很小的地方时，应该把第二块放在第一块以下。它们应该垂直居中。 –

@Kartikey，我更新了演示链接，用于显示：flex，解释和演示已经在那里:) –

@Kartikey这是否回答你的问题？ –

如何在窗口大小调整时保持元素居中

回答

相关问题