Question

所以我试图在页面底部div的黑色背景中制作红色div（面板）中心，同时在其中加入字体令人敬畏的徽标并使整个红色div成为一个按钮，而不是只是图标。我已经找到了答案，但找不到，非常感谢任何帮助。

body {
  width: 100%;
  padding: 0;
  margin: 0;
}

body,
html {
  background: fixed;
  background-image: url("../img/pineapple-1704339_1920");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: grey;
  height: 95.8vh;
}

.text-box {
  text-align: center;
}

.panel {
  text-align: center;
  padding: 7vh;
  border-radius: 20px 20px 20px;
  background-color: red;
  height: calc(100% - 80px);
}


/*==============================================================================evrythang==*/

.hero {
  height: 75%;
  width: 100%;
}

.hero-title {
  text-align: center;
  margin-top: 0;
  padding-top: 10%;
  color: white;
}


/*==============================================================================hero section==*/

.external-sites {
  height: 25%;
  width: 100%;
  background-color: black;
}


/*==============================================================================external sites==*/

.work-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sites {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="footer">
  <div class="container-fluid external-sites">
    <div class="row">
      <div class="col-md-4">
        <div class="panel">
          <a href="#" target="_blank"><i class="fa fa-linkedin fa-5x" style="color:blue"></i></a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel">
          <i aria-hidden="true" class="fa fa-html5 fa-5x fa-center"></i>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel">
          <a href="#" target="_blank"><i class="fa fa-github-square fa-5x" style="color:green"></i></a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

如果我对您想要做的事情有所了解 - 这里有一段代码可以完成我认为您想要的内容。看起来您没有将中间面板配置为链接，所以我没有这样做，但移动了锚标记以封闭您的.panel div。还调整了CSS以使您的面板div设置更具体，以便使用背景颜色的设置。并包括字体 - 真棒CSS链接。

body {
  width: 100%;
  padding: 0;
  margin: 0;
}

body,
html {
  background: fixed;
  background-image: url("../img/pineapple-1704339_1920");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: grey;
  height: 95.8vh;
}

.text-box {
  text-align: center;
}

div.col-md-4 .panel {
  text-align: center;
  padding: 7vh;
  border-radius: 20px 20px 20px;
  background-color: red;
  height: calc(100% - 80px);
}

.hero {
  height: 75%;
  width: 100%;
}

.hero-title {
  text-align: center;
  margin-top: 0;
  padding-top: 10%;
  color: white;
}

.external-sites {
  height: 25%;
  width: 100%;
  background-color: black;
}

.work-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sites {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<div class="footer">
  <div class="container-fluid external-sites">
    <div class="row">
      <div class="col-md-4">
      <a href="#" target="_blank">
        <div class="panel">
          <i class="fa fa-linkedin fa-5x" style="color:blue"></i>
        </div>
        </a>
      </div>
      <div class="col-md-4">
        <div class="panel">
          <i aria-hidden="true" class="fa fa-html5 fa-5x fa-center"></i>
        </div>
      </div>
      <div class="col-md-4">
        <a href="#" target="_blank">
          <div class="panel">
            <i class="fa fa-github-square fa-5x" style="color:green"></i>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Answer 2

我认为你试图让红色面板与字体真棒图标一起垂直居中，所以试试这个css

.panel {
    text-align: center;
    padding: 7vh;
    border-radius: 20px 20px 20px;
    background-color: red;
     height: calc(100% - 80px);
    margin: 5vh;
}
.panel a {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

<div class="footer">
  <div class="container-fluid external-sites">
    <div class="row">
      <div class="col-md-4">
        <div class="panel">
          <a href="#" target="_blank"><i class="fa fa-linkedin fa-5x" style="color:blue"></i></a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel">
          <a href="#" target="_blank"><i aria-hidden="true" class="fa fa-html5 fa-5x fa-center"></i></a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel">
          <a href="#" target="_blank"><i class="fa fa-github-square fa-5x" style="color:green"></i></a>
        </div>
      </div>
    </div>
  </div>

不能把面板div放在里面

2 个答案: