中心包装分区

时间：2018-01-08 17:46:23

标签： html css css3 flexbox

我试图将我的网页放在

中心 
.wrapper {
    display: flex;
    align-items: stretch;
    background: #fafafa;
    /*max-width: 1520px; */
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
    text-align: left;
    width: 960px;
    margin: 0 auto;
}

根据我的理解，最后两行应该居中，但页面仍粘在左边。所有内容都在包装器中，我已经使用https://validator.w3.org检查了我的HTML和CSS代码，所以我不认为它可能是不正确的标签。

我错过了什么吗？

该页面的完整代码位于：HTML CSS

非常感谢任何帮助！

3 个答案:

答案 0 :(得分：1)

将.wrapper css替换为下面的

.wrapper {
    display: flex;
    background: #fafafa;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
    max-width: 960px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
}
  

或另一种解决方案是将 margin: auto; 设置为正文

我希望这会对你有所帮助

/*
    DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
  font-family: 'Georgia', serif;
  background-image: url("path-to-stripe.png");
  max-width: 960px;
  /**background: #fafafa; **/
}

p {
  font-family: '{Poppins}',
  sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #999;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

.navbar {
  padding: 15px 40px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}


/*
div.wrapper{
    display: flex;
    align-items: stretch;
    max-width : auto ;
    position : center;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
    background: #fafafa;
    padding-left: 10px;
    padding-right: 10px;
}
*/


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
  display: flex;
  background: #fafafa;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
  max-width: 960px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #082e59;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 2.9);
  color: #fff;
  transition: all 0.3s;
}

#sidebar.active {
  margin-left: -250px;
}

#sidebar .sidebar-header {
  padding: 20px;
  background: #082e59;
}

#sidebar ul.components {
  padding: 30px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: #7386D5;
  background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: #fff;
  background: #7192b7;
}

a[data-toggle="collapse"] {
  position: relative;
}

a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
  content: '\e259';
  display: block;
  position: absolute;
  right: 20px;
  font-family: 'Glyphicons Halflings';
  font-size: 0.6em;
}

a[aria-expanded="true"]::before {
  content: '\e260';
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #082e59;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #7386D5;
}

a.article,
a.article:hover {
  background: #082e59 !important;
  color: #fff !important;
}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
}


/* ---------------------------------------------------
    MAP STYLES
----------------------------------------------------- */

#container1 {
  display: block;
  max-width: 1200px;
  min-height: 505px;
  position: auto;
  /* height: 475px; position: center;*/
  align-items: stretch;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
    margin-left: -250px;
  }
  #sidebar.active {
    margin-left: 0;
  }
  #sidebarCollapse span {
    display: none;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>NEA SCA Onboarding</title>

  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="style.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>


  <div class="wrapper">
    <!-- Sidebar Holder -->
    <nav id="sidebar">
      <div class="sidebar-header">
        <p style="text-align:center;"><img src="stateheader.png" alt="div" width="100px" align="middle" /></p>
        <h3 style="text-align:center;">Onboarding</h3>
      </div>

      <ul class="list-unstyled components">
        <li class="active">
          <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" style="text-align:center;">Compare By</a>
          <ul class="collapse list-unstyled" id="homeSubmenu">
            <li><a href="#">Population</a></li>
            <li><a href="#">Fertility Rate</a></li>
            <li><a href="#">Health Expenses (%GDP)</a></li>
            <li><a href="#">Military Expenses (%GDP)</a></li>
            <li><a href="#">Education Expenses (%GDP)</a></li>
          </ul>
        </li>
        <li class="active">
          <a href="#index.html" style="text-align:center;">About This Tool</a>
        </li>
      </ul>

      <ul class="list-unstyled CTAs">
        <li><a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">View data source</a></li>
        <li><a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">NEA/SCA Home</a></li>
      </ul>
    </nav>

    <!-- Page Content Holder -->
    <div id="content">

      <nav class="navbar navbar-default">
        <div class="container-fluid">

          <div class="navbar-header">
            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                                <i class="fa fa-align-justify"></i>
                            </button>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
              <li><a href="#">Near East Asia (NEA)</a></li>
              <li><a href="#">South Central Asia (SCA)</a></li>
            </ul>
          </div>
        </div>
      </nav>

      <nav class="navbar navbar-default">
        <h2>Near East Asia Region</h2>
        <p>This tool uses data from the CIA World Factbook to compare different countries in your region.</p>

        <!-- MAP CODE STARTS HERE -->
        <div id="container1">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>

          <script>
            // example data from server
            var series = [
              ["DZA", 75],
              ["EGY", 43],
              ["IRN", 50],
              ["IRQ", 88],
              ["ISR", 21],
              ["JOR", 43],
              ["KWT", 21],
              ["LBN", 19],
              ["LBY", 60],
              ["MAR", 4],
              ["OMN", 44],
              ["QAT", 44],
              ["SAU", 44],
              ["SYR", 44],
              ["TUN", 44],
              ["ARE", 44],
              ["YEM", 38]
            ];


            // Datamaps expect data in format:
            // { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
            //   "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
            var dataset = {};

            // We need to colorize every country based on "numberOfWhatever"
            // colors should be uniq for every value.
            // For this purpose we create palette(using min/max series-value)
            var onlyValues = series.map(function(obj) {
              return obj[1];
            });
            var minValue = Math.min.apply(null, onlyValues),
              maxValue = Math.max.apply(null, onlyValues);

            // create color palette function
            // color can be whatever you wish
            var paletteScale = d3.scale.linear()
              .domain([minValue, maxValue])
              .range(["#EFEFFF", "#02386F"]); // blue color

            // fill dataset in appropriate format
            series.forEach(function(item) { //
              // item example value ["USA", 70]
              var iso = item[0],
                value = item[1];
              dataset[iso] = {
                numberOfThings: value,
                fillColor: paletteScale(value)
              };
            });

            // render map
            var map = new Datamap({
              element: document.getElementById('container1'),
              projection: 'mercator', // big world map
              // countries don't listed in dataset will be painted with this color
              fills: {
                defaultFill: '#F5F5F5'
              },
              data: dataset,
              setProjection: function(element) {
                var projection = d3.geo.equirectangular()
                  .center([37.4, 25.7])
                  .rotate([4.4, 0])
                  .scale(450)
                  .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
                var path = d3.geo.path()
                  .projection(projection);

                return {
                  path: path,
                  projection: projection
                };
              },
              geographyConfig: {
                borderColor: '#DEDEDE',
                highlightBorderWidth: 1,
                // don't change color on mouse hover
                highlightFillColor: function(geo) {
                  return geo['fillColor'] || '#F5F5F5';
                },
                // only change border
                highlightBorderColor: '#B7B7B7',
                // show desired information in tooltip
                popupTemplate: function(geo, data) {
                  // don't show tooltip if country don't present in dataset
                  if (!data) {
                    return;
                  }
                  // tooltip content
                  return ['<div class="hoverinfo">',
                    '<strong>', geo.properties.name, '</strong>',
                    '<br>Count: <strong>', data.numberOfThings, '</strong>',
                    '</div>'
                  ].join('');
                }
              }
            });

            map.legend();
          </script>
      </nav>
      </div>
      <!--MAP CODE ENDS HERE -->

    </div>
    <!--close content div-->
    <!--<p style="text-align:center;"><img src = "dos_divider.png" alt="div" align = "middle"/><p> -->
  </div>
  <!--close wrapper div> -->

  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <!-- Bootstrap Js CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#sidebarCollapse').on('click', function() {
        $('#sidebar').toggleClass('active');
      });
    });
  </script>


</body>

</html>

答案 1 :(得分：0)

如果我理解正确，您希望您的内容居中。通过向#content div：

添加margin：auto来尝试此css更改 
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
margin: auto;

}

答案 2 :(得分：0)

问题是你已经为body元素设置了固定的最大宽度960px，这阻止了你的包装工作。删除它，它会没事的。

相关问题
最新问题