居中在CSS/HTML中彼此相邻的2个元素

Question

我有两个元素（地图+描述框内）。当在大屏幕上时，两个元素都出现在同一行上，这很好。但是，他们留在页面的左侧，我希望他们坐在中间。

的下方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>

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

Answer 1

只要将整个HTML代码，这里面

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

，并添加一个类只有

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

Answer 2

使用CSS Flexbox。将这些贴图包装在一个容器中（在我的例子中为map_holder）。

看一看片断如下（使用全屏）：

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

 
body { 
 
    margin: 0; 
 
}

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

希望这有助于！

Answer 3

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

把外部股利或容器，以您的地图，并使用证明内容：中心

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。小提琴。 - 穆罕默德奥斯曼3分钟前