Question

当我调整窗口大小时，两个框保持左对齐，如图所示。

如何将他们带到中心？

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>

Answer 1

text-align:center？的 DEMO, + vertical align

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

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

有关信息，在flexbox模型中，margin:auto到verticaly center元素可用于水平居中 DEMO CENTER x,y

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

1 个答案: