css - 元素居中网格中的最后一行左对齐

标签 css grid-layout text-align

我在一个 div 中有一堆相同大小的 block 设置为 display:inline-block，它的 text-align:center 设置为对齐 block 。 

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

block 水平填充 div，随着浏览器窗口的缩小，一些 block 换行，创建更多的行和更少的列。我希望所有内容仍然居中，最后一行向左对齐，如下所示:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

目前发生的事情是这样的:

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|            _____   _____            |
|           |     | |     |           |
|           |  7  | |  8  |           |
|           |_____| |_____|           |
|                                     |

我不能像一个建议那样添加额外的填充 div，因为可能有任意数量的 block ，并且行数和列数将根据浏览器宽度而变化。出于同样的原因，我也不能直接设置 block #7 的样式。无论有多少列， block 都必须始终居中。

这里有一支笔可以更好地演示:

http://codepen.io/anon/pen/IDsxn

这可能吗？我觉得它肯定应该是。我不想使用 flexbox，因为它只有 ie10+，而我想要 ie9+。我真的很想要一个纯 CSS 解决方案，但如果你告诉我 JS 是唯一的方法，我很乐意看到它的实际应用。

供引用 - 类似的问题，但没有一个得到彻底解释:

How to align left last row/line in multiple line flexbox

CSS - Left align the last row of images in a centered div

Fix centering last line of elements in fluid container grid to be left aligned while container stays centered

Center multiple inline blocks with CSS and align the last row to the left

最佳答案

显示内联 block 的解决方案

这种自适应网格要简单得多:标记和 CSS 更少，因此更容易在生产站点中实现并适应您的确切需求。

=>> DEMO <<=(调整结果窗口大小看效果)

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}
<div id="container">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
    <div class="block">13</div>
</div>

它涉及:

  1. 4 个媒体查询，用于 200 像素宽的 block 和一个可扩展到 1000 像素的容器。根据网格元素的宽度和容器的总宽度，您可能需要制作更少或更多

  2. 删除行内 block 元素之间的空白(在下面的演示中我使用了字体大小技术，但您可以使用其他技术(其他技术请参见 How to remove the space between inline-block elements?)

  3. block 之间的固定边距

一行中的 block 数适应容器的大小。 text-align 属性保持默认值 left 因此最后的元素左对齐。

block 和容器之间具有自适应边距的 float

=>> DEMO <<=(您需要将结果窗口的大小调整到 750 像素以下才能看到效果)

html, body {
    margin:0;
    padding:0;
    min-width:150px;
}
.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

@media screen and (min-width: 751px) {
    #warning{
        color:#fff;
        display:block;
        position:fixed;
        width:100%;
        height:50%;
        top:25%;
        left:0;
        background:#000;
        text-align:center;
        font-size:30px;
}
<div id="container">
    <div class="wrap"><div class="foto">1</div></div>
    <div class="wrap"><div class="foto">2</div></div>
    <div class="wrap"><div class="foto">3</div></div>
    <div class="wrap"><div class="foto">4</div></div>
    <div class="wrap"><div class="foto">5</div></div>
    <div class="wrap"><div class="foto">6</div></div>
    <div class="wrap"><div class="foto">7</div></div>
    <div class="wrap"><div class="foto">8</div></div>
    <div class="wrap"><div class="foto">9</div></div>
    <div class="wrap"><div class="foto">10</div></div>
    <div class="wrap"><div class="foto">11</div></div>
    <div class="wrap"><div class="foto">12</div></div>
    <div class="wrap"><div class="foto">13</div></div>
    <div class="wrap"><div class="foto">14</div></div>
    <div class="wrap"><div class="foto">15</div></div>
</div>

<!-- FOLLOWING JUST FOR THE DEMO -->
<div id="warning">I haven't written the code for windows bigger than 751px.<br/>
    You must resize this window under 751px.</div>

此技术涉及:

  1. 花车
  2. position:absolute;
  3. :nt-child() CSS 选择器
  4. 媒体查询

它使 block 在其容器中居中，并在所有 block 的顶部/左侧/紧/底部 + 容器的侧面提供相同的边距。由于此解决方案使用 float ，因此最后一行向左对齐。

一行中的 block 数适应窗口的宽度。

关于css - 元素居中网格中的最后一行左对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19527104/

上一篇：firefox - *|* 这在 CSS 中意味着什么？

下一篇：css - 为什么所有浏览器都下载所有 CSS 文件——即使是它们不支持的媒体类型？

相关文章：

javascript - 我的叠加层没有使用 css 居中

css - 使 CSS 文件中的所有规则仅适用于 id 的后代

Java:强制组件填满 GridLayout 中的整行

html - 垂直对齐不同字体大小的文本

jquery - 通过 CSS 删除 <ul> 元素符号

html - xHtml 下载文件到硬盘

html - 如何以类似网格的方式定位我的内容

css - 在网格布局中偏移 div

html - CSS中简单按钮的对齐方式

html - 用右边的图像环绕文字

©2024 IT工具网  联系我们