बूटस्ट्रैप -4 का उपयोग करके एक नई साइट बनाने की कोशिश कर रहा है

मैं बाईं ओर एक लोगो, केंद्र में एक लिंक बटन और एक पाद लेख div के दाईं ओर एक लिंक बटन संरेखित करने का प्रयास कर रहा हूं। फिलहाल, मैं इसे काम कर रहा हूं, सिवाय इसके कि लोगो को लंबवत रूप से संरेखित किया गया है ताकि इसका शीर्ष छवि के केंद्र के बजाय बीच में हो, इसलिए यह नीचे लटक रहा है!

मैंने इसे लंबवत रूप से संरेखित करने का प्रयास किया है और सामग्री सेटिंग्स को सही ठहराने के साथ प्रयोग किया है।

.footer {

  background-color: #68B3E2;
  text-align: center;
  padding: 30px;
  justify-content: space-around;

}

.logo {

  display:inline-block;
  float:left;

}

.center_btn {

  display:inline-block;
  float:none;

}

.right_btn {

  display:inline-block; 
  float:right;

}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="footer">

  <img class=logo src="images/logo.png" width="120" height="120" alt="">

  <a class="center_btn btn-primary btn-lg" href="#" role="button">Ask a question</a>

  <a class="right_btn btn-primary btn-lg" href="#" role="button">Register</a>

</div>
0
bill_face 31 मार्च 2020, 19:26

2 जवाब

सबसे बढ़िया उत्तर

बूटस्ट्रैप फ्लेक्सबॉक्स उपयोग कक्षाओं का उपयोग करना आसान है (सभी अतिरिक्त सीएसएस की आवश्यकता नहीं है) ...

<div class="footer d-flex justify-content-between align-items-center">
    <img class=logo src="//placehold.it/120" width="120" height="120" alt="">
    <a class="center_btn btn-primary btn-lg" href="#" role="button">Ask a question</a>
    <a class="right_btn btn-primary btn-lg" href="#" role="button">Register</a>
</div>

https://codeply.com/p/QpjEZtn11G

1
Zim 31 मार्च 2020, 23:13

शुभ दिवस! बस फ्लेक्सबॉक्स सीएसएस का उपयोग करें, इसे सरल रखें।

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #68B3E2;
  padding: 30px;
}
<div class="footer">
  <img class=logo src="https://avatars.mds.yandex.net/get-pdb/2978990/ac5c48be-c30e-4595-9f4b-72fa8d31addb/s375" width="120" height="120" alt="">
  <a class="center_btn btn-primary btn-lg" href="#" role="button">Ask a question</a>
  <a class="right_btn btn-primary btn-lg" href="#" role="button">Register</a>
</div>
0
AlexanderFSP 31 मार्च 2020, 19:37