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

更新 - 您可以使用网格。

setq

Answer 3

删除float：left;从＃box1，＃box2添加display：inline-block; ps：如果你使用.box而不是＃box1，＃box2

，那就更好了

或使用twitter 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

3 个答案: