CSS元素將內容向下推

Question

我在我的網站上有3個元素，它們以一個圖標開頭，我用CSS在懸停時進行了動畫處理。但是當我徘徊時，整個部分都被推下去了。我只希望影響圖標。這可能是一個定位的事情，但我已經嘗試了幾件我知道的事情，但似乎沒有任何事情按我希望的方式工作。順便說一下，該網站是使用Bootstrap構建的，但這可能不是我的問題的一部分。

該網站可以在這裏看到：http://www.vielendank.dk/bootstrap （中途下 - 藍色部分）

的HTML看起來像這樣：

<div class="span4 text-center"> 
<div class="komp"><div class="komp-ikon"> 
<i class="icon-pencil"></i></div> 
<h4>Grafisk design</br>og rentegning</h4></br> 
Vi elsker design! Grafisk design og rentegning er vielen danks absolutte 
spidskompetence – vi vil gå så vidt som at kalde os selv for nørder. 
</div></div> 

的CSS是這樣的：

.komp{ 
display: block; 
} 

.komp-ikon{ 
font-size: 40px; 
color:#007fa7; 
padding-top: 20px; 
background-color: white; 
width: 80px; 
height: 60px; 
margin-left: auto; 
margin-right: auto; 
margin-bottom: 20px; 
-moz-border-radius: 6%;-khtml-border-radius: 6%;-webkit-border-radius: 6%;border-radius: 6%; 

-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 

-moz-transition: all 0.2s ease-in; 
-webkit-transition: all 0.2s ease-in; 
-o-transition: all 0.2s ease-in; 
transition: all 0.2s ease-in; 
-ms-transition: all 0.2s ease-in;} 

.komp:hover .komp-ikon{ 
color: #41ab29; 
font-size: 60px; 
padding-top: 20px; 
background-color: white; 
width: 100px; 
height: 80px; 
margin-left: auto; 
margin-right: auto; 
margin-bottom: 20px; 
-moz-border-radius: 4%;-khtml-border-radius: 4%;-webkit-border-radius: 4%;border-radius: 4%; 


-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);} 

.komp:hover h4{ 
color:#41ab29; 
font-family: 'Montserrat Alternates', sans-serif; 
font-weight: 400; 
margin-bottom: 0px; 
padding-bottom: 0px;} 

謝謝你們......

Answer 1

簡單地給那個div af ixed高度：

.section.blue { 
    height: 350px; 
} 

或者，如果你想選擇更具體：

.section.blue .container .row { 
    height: 270px; 
} 

Answer 2

試試這個：

CSS

.komp { 
     display: block; 
     padding: 100px 0 0; 
    } 

    .komp-ikon { 
     font-size: 40px; 
     color:#007fa7; 
     padding-top: 20px; 
     background-color: white; 
     width: 80px; 
     height: 60px; 
     margin: 0 0 0 -40px; 
     -moz-border-radius: 6%; 
     -khtml-border-radius: 6%; 
     -webkit-border-radius: 6%; 
     border-radius: 6%; 
     position: absolute; 
     top: 20px; 
     left: 50%; 

     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 

     -moz-transition: all 0.2s ease-in; 
     -webkit-transition: all 0.2s ease-in; 
     -o-transition: all 0.2s ease-in; 
     transition: all 0.2s ease-in; 
     -ms-transition: all 0.2s ease-in; 
    } 

    .komp:hover .komp-ikon { 
     color: #41ab29; 
     font-size: 60px; 
     padding-top: 20px; 
     background-color: white; 
     width: 100px; 
     height: 80px; 
     margin-left: auto; 
     margin-right: auto; 
     margin-bottom: 20px; 
     -moz-border-radius: 4%;-khtml-border-radius: 4%;-webkit-border-radius: 4%;border-radius: 4%; 


     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);} 

     .komp:hover h4{ 
     color:#41ab29; 
     font-family: 'Montserrat Alternates', sans-serif; 
     font-weight: 400; 
     margin-bottom: 0px; 
     padding-bottom: 0px; 
    } 

HTML

<div class="span4 text-center"> 

    <div class="komp"> 

     <div class="komp-ikon"> 
      <i class="icon-pencil"></i> 

     </div> 

     <h4>Grafisk design</br>og rentegning</h4></br> 
     Vi elsker design! Grafisk design og rentegning er vielen danks absolutte 
     spidskompetence – vi vil gå så vidt som at kalde os selv for nørder. 

    </div> 

</div> 

我對它進行了絕對定位，然後填充內容容器以便它不會落在按鈕後面。

不知道你要去哪裏使用這一點，但它可能是值得檢查到僅按鈕創建一個保持容器，使其更靈活:)

Answer 3

我解決了這個問題 我addede一個

.komp{postition: absolute;} 

由於某種原因，您需要將此元素定位到此元素中。現在唯一的事情就是圍繞那些無法使用margin-left/right：auto的圖標進行對中，但我希望能找到一個。

感謝您的意見...