Question

我有两个元素（一个框内的map + description）。在大屏幕上，两个元素都出现在同一条线上，这很好。但是，它们留在页面左侧，我希望它们位于中间位置。

.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>

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

Answer 1

只需将您的整个HTML代码放在此

中

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

并仅添加一个课程

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

Answer 2

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

<div class="container">
<p class="map_airbnb"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
183 estimated nights/year<br>
$127 price/night<br>
50.2% estimated occupancy<br>
$1920 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
38.2% multi-listings<br>
62.0% single listings <br><br>
<strong>Room Type:</strong><br>
55.3% entire homes/apartment<br>
42.6% private rooms <br>
2.1% shared rooms <br>
</p>
<p class="map_airbnb1"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
60 estimated nights/year<br>
$196 price/night<br>
16.3% estimated occupancy<br>
$759 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
28.5% multi-listings<br>
71.5% single listings <br><br>
<strong>Room Type:</strong><br>
60.3% entire homes/apartment<br>
37.9% private rooms <br>
1.8% shared rooms <br>
</p>
</div>

将外部div或容器放入地图并使用justify-content：center

Answer 3

使用 CSS Flexbox 。将这些地图包裹在容器内（在我的情况下为map_holder）。

查看下面的代码段（使用全屏）：

＆＃13;

.map_holder {
  display: flex;
  justify-content: center;
}

body {
  margin: 0;
}

＆＃13;

<div class="map_holder">
  
<p class="map_airbnb"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
183 estimated nights/year<br>
$127 price/night<br>
50.2% estimated occupancy<br>
$1920 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
38.2% multi-listings<br>
62.0% single listings <br><br>
<strong>Room Type:</strong><br>
55.3% entire homes/apartment<br>
42.6% private rooms <br>
2.1% shared rooms <br>
</p>
<p class="map_airbnb1"><iframe src="https://prox.carto.com/builder/4dedf917-eb0c-4121-8c6d-f4ab2a6b75d3/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<strong>Activity:</strong><br><br>
60 estimated nights/year<br>
$196 price/night<br>
16.3% estimated occupancy<br>
$759 estimated income/month<br><br>
<strong>Listing per Host:</strong><br>
28.5% multi-listings<br>
71.5% single listings <br><br>
<strong>Room Type:</strong><br>
60.3% entire homes/apartment<br>
37.9% private rooms <br>
1.8% shared rooms <br>
</p>
  
</div>

＆＃13;

希望这有帮助！

Answer 4

您可以使用媒体查询，因此只需更新您的css：

.map_airbnb  {
  float:left;
  width: 50%;
}
.map_airbnb1  {
  float:right;
  width: 50%;
}

@media screen and (max-width: 480px) {
    .map_airbnb, 
    .map_airbnb1 {
      width: 100%;
    }
}

这是您的原始版本https://jsfiddle.net/9ssukjg4/

Answer 5

将div中的两个块包裹起来并使用css3 flexbox。小提琴。 - Muhammad Usman 3分钟前

在CSS / HTML中将2个元素相互对接

5 个答案: