html - 在CSS/HTML中将两个相邻元素居中

我有两个元素（盒子里的地图+描述）。在大屏幕上时，两个元素都显示在同一行上，这很好。但是，它们留在页面左侧，我希望他们坐在中间。

以下的Here is a fiddle：

.map {
  float: left padding: 10px;
  width: 410px;
  border: 1px solid black;
  display: inline-block;
}
.map1 {
  float: right padding: 10px;
  width: 410px;
  border: 1px solid black;
  display: inline-block;
}
p {
  float: left;
  width: 100%;
}

<div class="map">
  <iframe src="https://ctrc00.carto.com/builder/e2f49f3c-b793-11e6-9ceb-0ef24382571b/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  <p><i>
    <u>Map 1: <strong>12,083 listings</strong> (Sept.2016)</i>
    </u>
    <h4><span style="color: #FFA500;"><strong>Activity:</strong></span></h4>
    <br>
    <strong>183</strong> estimated nights/year
    <br>
    <strong>$127</strong> price/night
    <br>
    <strong>50.2%</strong> estimated occupancy
    <br>
    <strong>$1920</strong> estimated income/month
    <br>
    <h4><span style="color: #FFA500;"><strong>Listing per Host:</strong></span></h4>
    <br>
    <strong>38.2%</strong> multi-listings
    <br>
    <strong>62.0%</strong> single listings
    <br>
    <br>
    <h4><span style="color: #FFA500;"><strong>Room Type:</strong></span></h4>
    <br>
    <strong>55.3%</strong> entire homes/apartment
    <br>
    <strong>42.6%</strong> private rooms
    <br>
    <strong>2.1%</strong> shared rooms
    <br>
  </p>
</div>
<p>
  <div class="map1">
    <iframe src="https://ctrc00.carto.com/builder/221c9570-b794-11e6-ad89-0e8c56e2ffdb/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    <p><i><u>Map 2: <strong>15,640 listings</strong> (Sept.2016)</p></i>
      </u>
      <h4><span style="color: #FFA500;"><span style="color: #FFA500;"><strong>Activity:</strong></span></h4>
      <br>
      <strong>60</strong> estimated nights/year
      <br>
      <strong>$196</strong> price/night
      <br>
      <strong>16.3%</strong> estimated occupancy
      <br>
      <strong>$759</strong> estimated income/month
      <br>
      <br>
      <h4><span style="color: #FFA500;"><strong>Listing per Host:</strong></span></h4>
      <br>
      <strong>28.5%</strong> multi-listings
      <br>
      <strong>71.5%</strong> single listings
      <br>
      <br>
      <h4><span style="color: #FFA500;"><strong>Room Type:</strong></span></h4>
      <br>
      <strong>60.3%</strong> entire homes/apartment
      <br>
      <strong>37.9%</strong> private rooms
      <br>
      <strong>1.8%</strong> shared rooms
      <br>
    </p>
  </div>

在上方和下方，我在中间有一些简单的文字/段落。

最佳答案

只需将整个html代码放在其中

<div class="container"> </div>

只加一堂课

.container{
   display: flex;justify-content: center;width:100%;
}

关于html - 在CSS/HTML中将两个相邻元素居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40904758/