Question

我有一个里面有3个div的section元素，我想横向居中＆＃div; div 2＆＃39;，但问题是adyacent divs的大小不同所以＆＃34; justify-content：center＆＃34;不起作用。

我知道here（标题为＆＃34;当相邻项目的大小不同时，以＃34为中心的灵活项目）是一个解决方案，但它对我不起作用。

以下是重要的代码：

HTML

section{
  display:flex;   
  position:relative;      
}   
#div1{          
  width:260px; 
}
#div2{    
  position:absolute;  
  left:50%;
  transform(translateX:-50%,0);  
}
#div3{    
  margin-left:auto;
  width:50px;
}

CSS

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

这也是codepen。

我的目标是中心＆＃39; div2＆＃39;并将其余的div分别移动到左右边缘。

任何帮助都将不胜感激。

Answer 1

  <section>   
    <div id="div1">DIV 1</div>
    <div id="div2_wrap">
      <div id="div2">DIV 2</div>
    </div>
    <div id="div3">DIV 3</div>
  </section>



 section{
   display: flex;
   position:relative; 
   padding:5px;
   height: 500px;
   background:yellow;
 }
 div{
   padding:5px; 
   background:coral;
 }
 #div1{         
   width:260px; 
 }
 #div2_wrap{  
   position: absolute;
   left:50%;
   height: 100%;
   align-items: center;
   display: flex;
 }
 #div2 {
   background-color: #000fff;
 }
 #div3{    
   margin-left:auto;
   width:50px;
 }

Answer 2

您可以将div包裹在另一个父div周围，并将它们设置为首先具有相等的宽度。然后将您的孩子div与其父母对齐。像这样：

HTML：

<section>
  <div class="wrapper" id="div1">
    <div class="innerDiv">DIV 1</div>
  </div>
  <div class="wrapper" id="div2">
    <div class="innerDiv">DIV 2</div>
  </div>
  <div class="wrapper" id="div3">
    <div class="innerDiv">DIV 3</div>
  </div>
</section>

CSS：

section{
  display:flex;
  padding:5px;
  background:yellow;
  text-align:center;
}
.wrapper{
  display:flex;
  flex-grow:1;
  flex-wrap:wrap;
}
.innerDiv{
  padding:5px; 
  background:coral;
}
#div1{
  justify-content:flex-start;
}
#div1 .innerDiv{
  flex:1;
}

#div2{
  justify-content:center;
}
#div3{
  justify-content:flex-end;
}
#div3 .innerDiv{
  width:50px;
}

<强> Codepen here

或者您可以使用旧学校更兼容浏览器的方式，并保持HTML代码相同。

section {
  padding: 5px;
  background: yellow;
  text-align: center;
  position: relative;
  float: left;
  box-sizing: border-box;
  width: 100%;
}

div {
  padding: 5px;
  display: inline-block;
  background: coral;
}

#div1 {
  width: 260px;
  float: left;
}

#div2 {
  left: 50%;
  margin-left: -0.5em;
  position: absolute;
}

#div3 {
  float: right;
  width: 50px;
}

<强> Codepen Here

当相邻项目的大小不同时，水平居中

2 个答案: