并排浮动中心 css

Question

我试图将两个图像并排居中，但由于某种原因，它总是在左侧显示图像。有谁知道我如何让它们居中并彼此相邻？

谢谢！

#container {
  width: auto;
  margin: 0 auto;
  border: 1px solid #665544;
  text-align: center;
}

#box1,
#box2 {
  border: 1px solid white;
  float: left;
  min-height: 200px;
  color: white;
}

#box1 {
  width: 250px;
  background-color: #111;
}

#box2 {
  width: 250px;
  background-color: #777;
}

<div id="container">

  <div id="box1">
    <h1>header1</h1>
    <p>aaa</p>
  </div>

  <div id="box2">
    <h1>header2</h1>
    <p>bbb</p>
  </div>

</div>

Answer 1

删除 float: left 并使用 display: inline-block

#box1, #box2 {
    border: 1px solid white;
    display: inline-block;
    min-height: 200px;
    color: white;
}

#container {
  width: auto;
  margin: 0 auto;

  border: 1px solid #665544;
  text-align: center;
}

#box1, #box2 {
  border: 1px solid white;
  display: inline-block;
  min-height: 200px;
  
  color: white;
}

#box1 {
     width: 200px;
     background-color: #111;
}

#box2 {
     width: 200px;
     background-color: #777;
}

<div id="container">

<div id="box1">
 <h1>header1</h1>
 <p>aaa</p>
</div>

<div id="box2">
<h1>header2</h1>
<p>bbb</p>
</div>

</div>

Fiddle

Answer 2

已更新 - 您可以使用网格。

#container {
        width: 100%;
        border: 1px solid #665544;
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
    }

    .box {
        width: 250px;
        border: 1px solid white;
        display: block;
        min-height: 200px;
        color: white;
        margin-right: auto;
        margin-left: auto;
    }

    #box1 {
        background-color: #111;
    }

    #box2 {
        background-color: #777;
    }

Answer 3

删除浮动：左；来自 #box1、#box2 并添加 display: inline-block； ps：最好使用 .box 代替 #box1, #box2

或使用推特Bootstrap（网格系统）

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        #container {
            width: auto;
            margin: 0 auto;
            border: 1px solid #665544;
            text-align: center;
        }

        .box {
            width: 250px;
            border: 1px solid white;
            display: inline-block;
            min-height: 200px;
            color: white;
        }

        #box1 {
            background-color: #111;
        }

        #box2 {
            background-color: #777;
        }
    </style>
</head>
<body>

    <div id="container">

    <div id="box1" class="box">
     <h1>header1</h1>
     <p>aaa</p>
    </div>

    <div id="box2" class="box">
     <h1>header2</h1>
     <p>bbb</p>
    </div>

    </div>

</body>
</html>

并排浮动中心 css

side by side float center css

html

css

center