Question

我希望圆圈垂直对齐，以便圆圈的中间与div框的顶部对齐。

有没有办法让它成为最敏感的＆＃34;如果这是有道理的。

CSS: 
    #feature .feature-thumb {
      background-color: #eaeaea;
      position: relative;
      padding: 40px;
      margin-top: 32px;
    }

    #feature .feature-icon {
      background-color: #64beeb;
      width: 85px;
      height: 85px;
      margin: 0 auto;
      top: 0;
      position: relative;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      display: table;
      text-align: center;
      vertical-align: middle;
      transition: all 0.4s ease-in-out;
    }

    #feature .feature-icon:hover {
      background-color: #eaeaea;
    }

    #feature .feature-icon span {
      display: table-cell;
      vertical-align: middle;
    }
    #feature .feature-icon .fa {
      color: #ffffff;
      font-size: 36px;
      margin: 0;
      padding: 0;
    }

Codepen Demo

Answer 1

如果您想调整该图标圈只有小屏幕，您可以使用媒体查询 @media ，然后您可以设置您想要的样式。如果您想要在所有屏幕上使用此功能，则可以在您已使用的图标类样式中使用此样式以及媒体查询之外的样式。这是您项目的解决方案

@media screen and (max-width: 768px) and (min-width: 320px){
   #feature .feature-icon {
      top:-70px;
   }
}

Codepen

Answer 2

您需要使用以下样式设置feature_icon：

position: absolute;
margin-top: -42.5px;
left: 50%;
margin-left: -42.5px;

您需要在#feature .feature-thumb

上设置填充

padding:0px 40px 40px 40px;

这将让你开始..你仍然需要用填充或边距向下推文本，因为它会在CSS更改时被打到灰色框的顶部。

Answer 3

尝试以下方法：

#feature .feature-icon {
  background-color: #64beeb;
  width: 85px;
  height: 85px;
  top: 0; /* Changed here */
  left: 50%; /* Changed here */
  position: absolute; /* Changed here */
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  display: table;
  text-align: center;
  vertical-align: middle;
  transition: all 0.4s ease-in-out;
  transform: translate(-50%, -50%); /* Changed here */
  -webkit-transform: translate(-50%, -50%); /* Changed here */
  -ms-transform: translate(-50%, -50%); /* Changed here */
  -o-transform: translate(-50%, -50%); /* Changed here */
  -moz-transform: translate(-50%, -50%); /* Changed here */
}

有没有办法将圆的中间对齐到灰色矩形的顶部？

3 个答案: