For some reason my divs won't center horizontally in a containing div:

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}
<div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div>

And sometimes there is a row div with just one block div in it. What am I doing wrong?

推荐答案

To achieve what you are trying to do:

Consider using display: inline-block instead of float.

Css相关问答推荐

在网格中整齐地对齐项目

基于高度的容器查询不起作用

CSS Select 器 $parent > $child Select 嵌套列表中的所有
  • 子元素
  • 带有 flex 的 CSS 空 div 以扩展并保持纵横比

    CSS网格列随着长内容改变大小

    图像 3D 悬停效果

    如何为柔和的配色方案提供易于使用的高对比度替代方案?

    nth-child 在一个页面上工作,但不在另一个页面上

    在 中制作等宽的列

    禁用输入的 CSS Select 器 type="submit"

    内联块在 Internet Explorer 7、6 中不起作用

    重置子元素的不透明度 - Maple Browser (Samsung TV App)

    隐藏元素,但显示 CSS 生成的内容

    在 IE9-10 中压缩 SVG 的背景大小

    透明的空心或切出的圆圈

    Highcharts 图表选项 backgroundColor:'transparent' 在 IE 8 上显示黑色

    如何强制显示垂直滚动条?

    使用自定义 CSS 在 WebView 中呈现 HTML

    :last-child 没有按预期工作?

    flexbox容器中的省略号