如何将div中并排的图像居中？

Question

我想知道如何将两张并排的图像居中？ 这是我的代码：

div#allen {
float: left;
padding: 0px 27px 0px 0px;
}

div#buckshill {
float: left;
padding: 0px 27px 0px 0px;
}

div#harvest {
float: left;
padding: 0px 27px 0px 0px;
}

我尝试在所有名为＆＃34; div id =＆＃34; floorplans＆＃34;并使用了保证金：0自动，但没有做到这一点

网站： http://www.meridianridgect.com/floor-plans/

Answer 1

如果父div类名是 parent 且子标记类名是 children 然后：

   .parent{
        text-align: center;
    }
    .children{
        display: inline-block;
    }

在您的网站中，父级是#floorplans，而子级是（div#allen, div#buckshill, div#harvest），而p是靠近div的位置。

删除float：none;在所有孩子中使用此css display: inline-block;来解决您的问题。

Answer 2

以下是适合您的示例。如果将内部div的宽度更改为需要居中的对象宽度，则应将任何内容居中。

https://jsfiddle.net/qkd5cm6a/

使其居中的代码：

#inner {
  width: 400px;
  margin: 0 auto;
}