那些遇到过的问题

居中对齐容器并左对齐子元素

m_c*_*ard 32 html css html5 css3

我有X个图像(所有相同的高度和宽度),我想在网页上显示它们.但我想让页面在调整浏览器大小时自动显示一行中的最大图像数量(不调整图像大小),并将图像显示为固定距离.

此外,图像应在页面中央组合在一起,并一个接一个地显示.

例如,当浏览器窗口宽度足以在一行上显示3个图像时,它们应显示如下.

每行3个图像以固定的距离分组在一起,在页面的中心,一个接一个. 在此输入图像描述

如果浏览器变得更宽,那么可以在一行上显示4个图像,它们应该像这样显示.

每行4个图像(不调整图像大小),在页面中心一个接一个地分开固定距离. 在此输入图像描述

到目前为止,我已经编写了以下代码:

HTML

<div class="outer-div">
    <div class="inner-div">
        <div class="image-div"><img src="images/1.png"></div>
        <div class="image-div"><img src="images/2.png"></div>
        <div class="image-div"><img src="images/3.png"></div>
        <div class="image-div"><img src="images/4.png"></div>
        <div class="image-div"><img src="images/5.png"></div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

img {
    height: 200px;
    width: 200px;
    padding: 10px;
}

.image-div {
    display: inline;
}

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left;
    display: inline;
}
Run Code Online (Sandbox Code Playgroud)

因此,图像以div(inner-div)内部的10px填充内联显示,然后在outer-div内居中.并且图像在内部div内部与文本对齐.

但问题是它们显示如下:

在此输入图像描述

当浏览器变宽时,如下所示 在此输入图像描述

有人可以告诉我如何显示像第一组图像的图像？

即每行的最大图像数(不调整图像大小),一个接一个地在页面中心组合在一起,固定距离(包裹).

Sti*_*ers 11

据我所知,用简单的CSS实现布局并不容易.以下方法使用媒体查询为不同的视口大小设置内部div的宽度.

如果您有相当多的项目,请考虑使用Javascript,CSS预处理器也可能有用.

请参阅内联的代码段和注释,还可以查看jsfiddle示例以便于测试.

body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

Rom*_*ulo 9

Maximum number of images per row (without resizing the images), one after another, grouped together in the centre of the page, fixed distance apart (wrapped).

That was a really good question. It seems very simple at first, but the optimum result is hard to achieve.

I don't really believe there's an way to achieve the expected behavior without using media queries.

However, making use of some media queries and knowing exactly the width of the images and the maximum possible number of images per row we can solve the issue using display: inline-* based properties.

display: inline-block

Should support old browsers, since it's around since CSS2. We have to use a little trick to prevent the rendering of an undesired blank space between the items.

The trick is setting the CSS property font-size: 0.

display: inline-flex

This solution makes use of the CSS flexbox and its a good option for modern browers.

display: inline-table

Supported since CSS2 also and no tricks needed in order to make it work.

display: inline

The final result is not the one expected by the author, since the elements in the second row will be center aligned and not left aligned. The good part about this solution is that it will work without previous knowledge of the image width and media queries.

.wrapper {
  text-align: center;
}
.inline {
  font-size: 0;
  display: inline;
}
.inline-block {
  display: inline-block;
  font-size: 0;
  text-align: left;
}
.inline-flex {
  display: inline-flex;
  flex-wrap: wrap;
}
.inline-table {
  display: inline-table;
  text-align: left;
}
.item {
  margin: 10px;
}
@media (max-width: 240px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 120px;
  }
}
@media (min-width: 241px) and (max-width: 360px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 240px;
  }
}
@media (min-width: 361px) and (max-width: 480px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 360px;
  }
}
@media (min-width: 481px) and (max-width: 600px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 480px;
  }
}
@media (min-width: 601px) and (max-width: 720px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 600px;
  }
}
@media (min-width: 721px) and (max-width: 840px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 720px;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<h1>display: inline-block</h1>

<div class="wrapper">

  <div class="inline-block">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-flex</h1>

<div class="wrapper">

  <div class="inline-flex">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-table</h1>

<div class="wrapper">

  <div class="inline-table">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline</h1>

<div class="wrapper">

  <div class="inline">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>
Run Code Online (Sandbox Code Playgroud)

Mic*_*l_B 6

这是一个可能适合您和其他人的通用解决方案.

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

CSS

ul {
    margin: 0 auto;              /* center container */
    width: 1000px;
    padding-left: 0;             /* remove list padding */
    list-style-type: none;
    font-size: 0;                /* remove inline-block white space;
                                    see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 60px;             /* restore font size removed in container */
    width: 150px;
    height: 150px;
    padding: 5px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
    line-height: 150px;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width: 600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
Run Code Online (Sandbox Code Playgroud)

DEMO

Re:Flexbox:虽然flexbox是一个很棒的工具,但它并不是解决这一特定问题的最佳解决方案.我在这里解释我的推理:如何使Flex容器居中但是左对齐flex项目

归档时间：

查看次数：

2785 次

最近记录：

9 年，8 月 前
如何使Flex容器居中但左对齐flex项目 67
如何使Flex容器居中但左对齐flex项目 67
在元素的居中网格中左对齐的最后一行 47
内嵌块盒不适合其容器 5
更多相关链接
相关归档
如何防止按钮提交表单 858
允许特定标记覆盖溢出:隐藏 65
支持jQuery和触控设备的水平滑动滑块？ 46
使用角度操作内联样式在IE中不起作用 30
以HTML格式阻止三星预测文本 28
Bootstrap Center Navbar项目 20
Chrome扩展程序内容安全策略指令错误 20
渐变框阴影和边框的CSS 9
删除CSS圆角晕的最佳方法是什么？ 5
按顺序连接/合并css文件 3
难疑归档
@staticmethod和@classmethod有什么区别？ 3360
如何在shell脚本中打印JSON？ 2905
原子和非原子属性之间有什么区别？ 1828
Python中的switch语句的替换？ 1719
如何在Javascript中的数组开头添加新的数组元素？ 1476
漂亮的git分支图 1290
命名类 - 如何避免将所有内容称为"<WhatEver> Manager"？ 1147
什么是首选的Bash shebang？ 1051
我如何修剪空白？ 1035
用于Python的IDE是什么？ 1028