इसलिए मैं पृष्ठ के निचले भाग में 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>
0
Andrew Waller 7 सितंबर 2017, 06:21

2 जवाब

अगर मुझे आपका विचार आता है कि आप क्या करना चाहते हैं - यहां कोड का एक स्निपेट है जो मुझे लगता है कि आप चाहते हैं। ऐसा लगता है कि आपके पास मध्य पैनल को लिंक के रूप में कॉन्फ़िगर नहीं किया गया था, इसलिए मैंने ऐसा नहीं किया, लेकिन आपके .panel 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;
}

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>
1
Ken H. 7 सितंबर 2017, 07:12

मुझे लगता है कि आप फ़ॉन्ट भयानक आइकन के साथ लाल पैनल को लंबवत केंद्र बनाने की कोशिश कर रहे हैं, इसलिए इस सीएसएस को आजमाएं

.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>
1
webtrackstudio 7 सितंबर 2017, 07:40