以中心为中心的div可以缩小它

时间：2017-06-12 07:06:54

标签： html css center

我试图制作div全宽，这是一个较小的包装器。 它是此question的扩展名：

问题是我的div现在太大了。高度很高，我无法找到改变它的方法。 网站：http://ndvibes.com它是底部的紫色。

代码：

＆＃13;
＆＃13; 
.feedback {
  background-color: #8904B1;
  margin: 0 auto;
  color: #ffffff;
  position: relative;
  z-index: 2;
  padding: 10px 0;
}

.feedback-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.feedback-wrapper:before,
.feedback-wrapper:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100vw;
  background-color: #8904B1;
  top: 0;
  z-index: 1;
}

.feedback-wrapper:before {
  left: -100%;
}

.feedback-wrapper:after {
  right: -100%;
}

.feedback span {
  text-align: center;
  display: block;
}
＆＃13; 
<div class="outer-space">
  <div class="wrapper">
    <!--MORE CODE FOR WEBSITE--->
    <div class="feedback-wrapper colorChange purple" id="test">
      <div class="feedback">
        <span>"Nooit zo een snelle service gehad"</span>
        <span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span>
        <span>"Eindelijk mijn online website gemoderniseerd"</span>
        <span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

这是完整网页的JSFiddle，因为Stackoverflow代码片段中没有出现此问题：https://jsfiddle.net/v0x6g29c/

2 个答案:

答案 0 :(得分：1)

检查一下，告诉我。

＆＃13;
＆＃13; 
.image-wrapper img {
  display: inline-block;
  width: 80%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.bigTitle {
  text-align: center;
  margin-top: -0.5%;
  margin-bottom: 5%;
  color: #766F82;
  font-family: "ValeraRound";
}

.positives {
  margin-top: 100px;
}

.positives .point {
  width: 30%;
  float: left;
  margin-left: 3%;
}

.positives .point img {
  width: 50%;
  display: block;
  margin: auto;
}

.btn-wrapper {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 140px;
  text-align: center;
}

.btn-wrapper .btn {
  padding: 20px;
  padding-right: 50px;
  padding-left: 50px;
  display: inline-block;
  border-radius: 10px;
  border: solid 1px #1D1846;
  /*color: #746982;*/
  color: #FFFFFF;
  font-style: italic;
  font-size: 22px;
}

.btn-wrapper span {
  display: block;
  margin-top: 15px;
  font-style: italic;
  color: #746982;
}

.outer-space {
  overflow: hidden;
}


/*
.feedback {
    clear: both;
    float: left;
    width: 1000%;
    position: relative;
    left: -500%;
    margin-top: 0;
    padding-bottom: 40px;
}
.feedback-wrapper {
  position: relative;
  width:100%;
  max-width: 600px;
  margin:0 auto;
}
.feedback:before, .feedback:after {
  content:"";
  position: absolute;
  height:20%;
  width:100vw;
  background-color: #8904B1;
  top: 0;
  z-index: 1;
}
.feedback:before {
  left:-100%;
}
.feedback:after {
  right:-100%;
}
.feedback-wrapper span {
    font-size: 22px;
    font-family: "Droid Serif";
    font-style: italic;
    color: #E3DBFF;
    display: block;
    margin-top: 20px;
text-align: center;
}
*/

.feedback {
  background-color: #8904B1;
  margin: 0 auto;
  color: #ffffff;
  position: relative;
  z-index: 2;
  padding: 10px 0;
  left:0 !important
}

.feedback-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
}

.feedback-wrapper:before,
.feedback-wrapper:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100vw;
  background-color: #8904B1;
  top: 0;
  z-index: 1;
}

.feedback-wrapper:before {
  left: -100%;
}

.feedback-wrapper:after {
  right: -100%;
}

.feedback span {
  text-align: center;
  display: block;
}


/***Responsive***/

@media screen and (max-width: 801px) {
  .bigTitle {
    font-size: 120%;
  }
  .positives {
    margin-top: 50px;
  }
  .positives .point {
    float: none;
    width: 60%;
    max-width: 225px;
    min-width: 180px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
  }
  .btn-wrapper {
    margin-top: 40px;
  }
  .feedback {
    width: 112%;
    left: -6%;
  }
  .feedback-wrapper {
    width: 90%;
    position: relative;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
  }
  .feedback-wrapper span {
    font-size: 14px;
    display: block;
    font-size: 100%;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/general.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="/images/favicon.png">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- include Google's AJAX API loader -->
    <script src="http://www.google.com/jsapi"></script>
    <!-- load JQuery and UI from Google (need to use UI to animate colors) -->
    <script type="text/javascript">
      google.load("jqueryui", "1.5.2");

    </script>

    <script src="/js/general.js"></script>
    <link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/index.css">


    <title>NDVibes - Webdeveloper</title>
  </head>

  <body>
    <div class="outer-space">
      <div class="wrapper">
        <div class="header">
          <div class="myNavbar-wrapper">
            <div class="myNavbar">
              <ul>
                <li><a class=active href="/">Home</a></li>
                <li><a href="/panel">Uw website</a></li>
                <li><a href="/about">Over</a></li>
                <li><a href="/portfolio">Portfolio</a></li>
                <li><a href="/contact">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="image-wrapper">
          <img src="/images/big_image.png" />
        </div>

        <h1 class="bigTitle">
                Webdeveloper since 2017
            </h1>

        <div class="positives">
          <div class="point">
            <img src="/images/fast.png" />
          </div>
          <div class="point">
            <img src="/images/responsive.png" />
          </div>
          <div class="point">
            <img src="/images/secure.png" />
          </div>
        </div>

        <div class="btn-wrapper">
          <a href="/panel">
            <div class="btn colorChange purple">
              Geef mij die website!
            </div>
          </a>
          <br>
          <span>
                    Geen enkel probleem! klik gewoon op de knop en ik zal zo snel mogelijk reageren.
                </span>
        </div>

        <div class="feedback-wrapper colorChange purple" id="test">
          <div class="feedback">
            <span>"Nooit zo een snelle service gehad"</span>
            <span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span>
            <span>"Eindelijk mijn online website gemoderniseerd"</span>
            <span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span>
          </div>
        </div>

        <div class="footer">
          Copyright &copy; 2017 - <span id="year">2017</span> Niel Duysters
        </div>
      </div>
    </div>
    <!---------------GOOGLE ANALYTICS----------------->
    <script>
      (function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function() {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
          m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

      ga('create', 'UA-46774773-2', 'auto');
      ga('send', 'pageview');

    </script>

  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这应该有效：

<强> HTML 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/general.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="/images/favicon.png">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- include Google's AJAX API loader -->
    <script src="http://www.google.com/jsapi"></script>
    <!-- load JQuery and UI from Google (need to use UI to animate colors) -->
    <script type="text/javascript">
      google.load("jqueryui", "1.5.2");

    </script>

    <script src="/js/general.js"></script>
    <link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/index.css">


    <title>NDVibes - Webdeveloper</title>
  </head>

  <body>
    <div class="outer-space">
      <div class="wrapper">
        <div class="header">
          <div class="myNavbar-wrapper">
            <div class="myNavbar">
              <ul>
                <li><a class=active href="/">Home</a></li>
                <li><a href="/panel">Uw website</a></li>
                <li><a href="/about">Over</a></li>
                <li><a href="/portfolio">Portfolio</a></li>
                <li><a href="/contact">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="image-wrapper">
          <img src="/images/big_image.png" />
        </div>

        <h1 class="bigTitle">
                Webdeveloper since 2017
            </h1>

        <div class="positives">
          <div class="point">
            <img src="/images/fast.png" />
          </div>
          <div class="point">
            <img src="/images/responsive.png" />
          </div>
          <div class="point">
            <img src="/images/secure.png" />
          </div>
        </div>

        <div class="btn-wrapper">
          <a href="/panel">
            <div class="btn colorChange purple">
              Geef mij die website!
            </div>
          </a>
          <br>
          <span>
                    Geen enkel probleem! klik gewoon op de knop en ik zal zo snel mogelijk reageren.
                </span>
        </div>

        <div class="feedback-wrapper colorChange purple" id="test">
          <div class="feedback">
            <span>"Nooit zo een snelle service gehad"</span>
            <span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span>
            <span>"Eindelijk mijn online website gemoderniseerd"</span>
            <span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span>
          </div>
        </div>

        <div class="footer">
          Copyright &copy; 2017 - <span id="year">2017</span> Niel Duysters
        </div>
      </div>
    </div>
    <!---------------GOOGLE ANALYTICS----------------->
    <script>
      (function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function() {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
          m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

      ga('create', 'UA-46774773-2', 'auto');
      ga('send', 'pageview');

    </script>

  </body>

</html>

<强> CSS 

.image-wrapper img {
  display: inline-block;
  width: 80%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.bigTitle {
  text-align: center;
  margin-top: -0.5%;
  margin-bottom: 5%;
  color: #766F82;
  font-family: "ValeraRound";
}

.positives {
  margin-top: 100px;
}

.positives .point {
  width: 30%;
  float: left;
  margin-left: 3%;
}

.positives .point img {
  width: 50%;
  display: block;
  margin: auto;
}

.btn-wrapper {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 140px;
  text-align: center;
}

.btn-wrapper .btn {
  padding: 20px;
  padding-right: 50px;
  padding-left: 50px;
  display: inline-block;
  border-radius: 10px;
  border: solid 1px #1D1846;
  /*color: #746982;*/
  color: #FFFFFF;
  font-style: italic;
  font-size: 22px;
}

.btn-wrapper span {
  display: block;
  margin-top: 15px;
  font-style: italic;
  color: #746982;
}

.outer-space {
  overflow: hidden;
}


/*
.feedback {
    clear: both;
    float: left;
    width: 1000%;
    position: relative;
    margin-top: 0;
    padding-bottom: 40px;
}
.feedback-wrapper {
  position: relative;
  width:100%;
  max-width: 600px;
  margin:0 auto;
}
.feedback:before, .feedback:after {
  content:"";
  position: absolute;
  height:20%;
  width:100vw;
  background-color: #8904B1;
  top: 0;
  z-index: 1;
}
.feedback:before {
  left:-100%;
}
.feedback:after {
  right:-100%;
}
.feedback-wrapper span {
    font-size: 22px;
    font-family: "Droid Serif";
    font-style: italic;
    color: #E3DBFF;
    display: block;
    margin-top: 20px;
text-align: center;
}
*/

.feedback {
  background-color: #8904B1;
  margin: 0 auto;
  color: #ffffff;
  position: relative;
  z-index: 2;
  padding: 10px 0;
  left:0 !important;
}

.feedback-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
}

.feedback-wrapper:before,
.feedback-wrapper:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100vw;
  background-color: #8904B1;
  top: 0;
  z-index: 1;
}

.feedback-wrapper:before {
  left: -100%;
}

.feedback-wrapper:after {
  right: -100%;
}

.feedback span {
  text-align: center;
  width:100%;
  display: block;
  z-index: 5;
}


/***Responsive***/

@media screen and (max-width: 801px) {
  .bigTitle {
    font-size: 120%;
  }
  .positives {
    margin-top: 50px;
  }
  .positives .point {
    float: none;
    width: 60%;
    max-width: 225px;
    min-width: 180px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
  }
  .btn-wrapper {
    margin-top: 40px;
  }
  .feedback {
    width: 112%;
    left: -6%;
  }
  .feedback-wrapper {
    width: 90%;
    position: relative;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
  }
  .feedback-wrapper span {
    font-size: 14px;
    display: block;
    font-size: 100%;
  }
}

https://jsfiddle.net/8ohnsf28/

相关问题
最新问题