CSS-如何实现“向左浮动”和“文本对齐:居中”的混合效果?

亚历克斯

这是一个非常简单的问题,但是我无法解决一个简单的问题。我需要连续居中3个正方形,但是我不知道正方形的总数(而简单的解决方案是使用text-align: center),但是我不想将最后一个元素居中。长话短说,如何float: left在主容器内创建效果+将所有元素居中?

JSfiddle在这里

HTML:

<div class="row b">
  <div class="col-lg-6 col-md-6 col-sm-12 col-lg-offset-3 col-md-offset-3">
    <div class="row maxW b">
      <div class="postContainer"></div>
      <div class="postContainer"></div>
      <div class="postContainer"></div>
      <div class="postContainer"></div>
    </div>
  </div>
</div>

CSS:

  .postContainer {
    width: 230px;
    height: 230px;
    border: 1px solid lightblue;
    display: inline-block;
  }

  .maxW {
    max-width: 900px;
  }

  .ce {
    text-align: center;
  }

.b{
  border:1px solid black;
}

预期结果:
这些正方形应该具有响应性,每行最大正方形为3。如果使用float: left,我几乎可以得到所需的东西,但是正方形被向左拉,而不是在主容器内居中。如果使用text-align: center,则正方形在主容器中居中,但我不希望最后一个正方形居中,则它们必须保持向左浮动。在此处输入图片说明

吉米·瑞尔(JimmyRare)

我建议使用flexbox。在CSS中,这是一个相当新的概念,但是在所有现代浏览器中都有很好的支持我个人在生产中使用它。

标记将简化为:

<div class="posts">
  <div class="postContainer"></div>
  <div class="postContainer"></div>
  <div class="postContainer"></div>
  <div class="postContainer"></div>
</div>

并且容器将具有CSS:

.posts {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin: 0 auto;
}

Display: flex告诉浏览器它是一个flexbox,flex-flow说它应该是行,当行满时会自动换行,并且内容应该用左对齐flex-start

小提琴

Flexbox基础

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS-如何实现“向左浮动”和“文本对齐:居中”的混合效果?

来自分类Dev

如何使用CSS Flexbox实现底部向左浮动和顶部向右浮动?

来自分类Dev

如何居中对齐文本?CSS

来自分类Dev

CSS:如何浮动:右移和居中

来自分类Dev

CSS:如何浮动:右移和居中

来自分类Dev

css向左浮动和向右浮动

来自分类Dev

HTML / CSS向左对齐,但保持居中

来自分类Dev

HTML / CSS向左对齐,但保持居中

来自分类Dev

CSS文本在向左浮动时开始换行

来自分类Dev

文本垂直居中对齐CSS

来自分类Dev

CSS向左浮动和position元素

来自分类Dev

CSS居中内容,向左浮动并有多行

来自分类Dev

CSS溢出向左浮动

来自分类Dev

CSS不能向左浮动

来自分类Dev

HTML / CSS:向左浮动

来自分类Dev

避免跨度浮动右对齐与文本(CSS)

来自分类Dev

如何使用CSS实现此文本笔画效果?

来自分类Dev

如何使用HTML和CSS居中对齐社交媒体标签

来自分类Dev

如何实现CSS缩放效果?

来自分类Dev

如何实现这种CSS效果

来自分类Dev

对齐并居中<textarea>文本HTML / CSS?

来自分类Dev

浮动对齐与 JSP 和 CSS 文件

来自分类Dev

HTML / CSS:如何居中浮动div?

来自分类Dev

使用 div 和带有 css 的 h1 类时如何将文本居中对齐的语法是什么

来自分类Dev

如何使用HTML和CSS实现立方体效果

来自分类Dev

JavaFX CSS在文本上实现这种效果

来自分类Dev

JavaFX CSS在文本上实现这种效果

来自分类Dev

JavaFX CSS在文本上实现这种效果

来自分类Dev

CSS浮动左对齐