居中的div不能让它变小

我正在试图制作一个更小的包装的div全宽。这是一个扩展question：居中的div不能让它变小

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

代码：

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

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

这里完整网页，因为没有发生在代码＃1 - 摘录问题的的jsfiddle：https://jsfiddle.net/v0x6g29c/

来源

2017-06-12 O' Niel

什么是您的问题？你想达到什么目的？ – Nick

@Nick在底部运行代码时，单击JSFiddle，会看到紫色/粉红色的div太高。我怎样才能让它的高度更小，所以对于文本（以及一些填充）来说足够高？图片：http://i.imgur.com/lo54OtP.png –

https://jsfiddle.net/vsrmjwkr/类似的东西？只需添加高度：自动到.feedback – Nick

这应该工作：

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/

来源

2017-06-12 07:43:47 Nick

你是一个英雄!!!!!!!!!!! –

需要记住的一点：出于某种原因，即使剩下：-500％被注释掉了，浏览器仍然在将它应用到元素上。我把它固定在小提琴上使用！重要的，但检查你的具体情况。重要可能没有必要。无论如何，现在很高兴它） – Nick

谢谢！但是，如果你不打扰，你还会给我一个关于如何将div放低一点的提示？ http://i.imgur.com/undefined.png –

检查这一点，并让我知道。

.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%; 
 
    } 
 
}

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

来源

2017-06-12 07:24:19 Hash

这真的很接近，但我的文字已经消失：https：//jsfiddle.net/v0x6g29c/1/ –

@O '尼尔编辑它:) – Hash

居中的div不能让它变小

回答

相关问题