对齐行内块中心

Posted 2023-03-05

【中文标题】对齐行内块中心

【英文标题】：Aligning inline-block center

【发布时间】：2014-12-26 18:49:50

【问题描述】：

居中对齐 inline-block 元素的最简单方法是什么？

理想情况下，我不想为元素设置宽度。这样，根据在元素中输入的文本，inline-block 元素将扩展到新的宽度，而无需更改 CSS 中的宽度。 inline-block 元素应该彼此居中（而不是并排），以及元素内的文本。

查看下面的代码或查看jsFiddle。

当前的 html：

<div>
  <h2>Hello, John Doe.</h2>
  <h2>Welcome and have a wonderful day.</h2>
</div>

当前的 SCSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  

body 
    margin: 0 auto;
    background: rgba(51,51,51,1);
    font-family: 'Open Sans', sans-serif;


div 
    width: 100%;
    height: auto;
    margin: 15% 0;
    text-align: center;
    h2 
        margin: 0 auto;
        padding: 10px;
        text-align: center;
        float: left;
        clear: left;
        display: inline-block;
        &:first-child 
            color: black;
            background: rgba(255,255,255,1);
        
        &:last-child 
            color: white;
            background: rgba(117,80,161,1);
        
    

在两个元素之间加一个br，去掉float:left/clear:left可能是最简单的方法；但是，我很好奇是否有其他方法可以解决这个问题。

【问题讨论】：

Is it possible to center an inline-block element and if so, how?的可能重复

【参考方案1】：

像这样？ http://jsfiddle.net/bcL023ko/3/ 删除左侧的float:left 并添加margin: 0 auto 以使元素居中。还是您正在寻找的其他东西？

【讨论】：

如果父级有text-align:center 和inline-block 元素，则不需要使用margin:0 auto - jsfiddle.net/bcL023ko/4

@k-nut 我正在寻找要堆叠在一起的元素，而不是并排。

@k-nut 我正在寻找要堆叠在一起的元素。

您使用的是什么浏览器和分辨率？它们是为我堆放的。

@k-nut 我看到它们以较小的分辨率堆叠，但不是所有尺寸。我使用的是 chrome，我的屏幕分辨率是 1920x1080。