如何在CSS中将多个图像移回中心？

Question

我无法将x4图像移回页面中间。

我的CSS代码保持不变，但是我的图像向左移动，我需要将它们移回中心。我尝试过display：block并使用浮点数，但这没有用。

这是先前居中的当前代码。如果您有任何建议，请告诉我！

img {
  margin: 40px 8px 0 8px;
}

Answer 1

有多种居中，您是说：

将图像放在同一行上吗？

body {
  display: flex;
  justify-content: space-around;
}

<img src="//placecage.com/100/100">
<img src="//placecage.com/100/100">
<img src="//placecage.com/100/100">
<img src="//placecage.com/100/100">

将图像放在同一列上吗？

img {
  display:block;
  margin: 0 auto;
}

<img src="//placecage.com/100/100">
<img src="//placecage.com/100/100">
<img src="//placecage.com/100/100">
<img src="//placecage.com/100/100">

将图像垂直和水平居中？

body {
  min-height: 100vh;
  align-items: center;
  display: flex;
  justify-content: space-around;
}

<img src="//placecage.com/100/100">
<img src="//placecage.com/100/100">
<img src="//placecage.com/100/100">
<img src="//placecage.com/100/100">

Answer 2

这应该有帮助

public static function front_fields( $fields ) {
    $fields[] = [
        'forms'             => ['car', ],
        'type'              => 'fieldset',
        'id'                => 'car',
        'legend'            => esc_html__( 'Car', 'listing-manager' ),
        'collapsible'       => true,
        'fields'            => [
            [
                'id'        => LISTING_MANAGER_LISTING_PREFIX . 'car_engine',
                'type'      => 'text',
                'label'     => esc_html__( 'Engine', 'listing-manager' ),
                'required'  => false,
            ],