बड़े फ़ॉन्ट-भयानक आइकन के साथ पाठ को लंबवत रूप से कैसे केंद्रित करें?

231

आइए बताते हैं कि मेरे पास फ़ॉन्ट-भयानक आइकन और कुछ पाठ के साथ बूटस्ट्रैप बटन है:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

मैं टेक्स्ट को लंबवत केंद्रित कैसे प्रदर्शित करूं? पाठ को अब आइकन के निचले किनारे के साथ संरेखित किया गया है: http://jsfiddle.net/V7DLm/1/

संपादित करें: मेरे पास एक संभावित समाधान है : http://jsfiddle.net/CLdeG/1/ लेकिन यह थोड़ा हैकी लगता है - अतिरिक्त पी टैग का परिचय देता है, पुल-लेफ्ट और डिस्प्ले का उपयोग करता है: टेबल। शायद कोई आसान रास्ता सुझा सकता है।

html css font-awesome

— पॉल
स्रोत

2

तुम भगवान हो। गंभीरता से, मैंने आज इस पर 2 घंटे बिताए, आपका समाधान BY FAR सबसे साफ था। किसी भी चीज़ को हार्डकोड करने की आवश्यकता नहीं है।

— चक

यह तरीका आसान है

— रवीना बेइमानसिंह

304

मुझे बस यह स्वयं करना था, आपको इसे दूसरे तरीके से करने की आवश्यकता है।

अपने पाठ के लंबवत-संरेखण के साथ न खेलें
फ़ॉन्ट-भयानक आइकन के ऊर्ध्वाधर संरेखण के साथ खेलते हैं

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

बेशक आप इनलाइन शैलियों का उपयोग नहीं कर सकते हैं और इसे अपने स्वयं के सीएसएस वर्ग के साथ लक्षित कर सकते हैं। लेकिन यह कॉपी पेस्ट फैशन में काम आता है।

यहां देखें: बटन में पाठ और आइकन का लंबवत संरेखण

हालांकि अगर यह मेरे ऊपर था, तो मैं आइकन-2x का उपयोग नहीं करूंगा। और केवल फ़ॉन्ट-आकार को स्वयं निर्दिष्ट करें, जैसा कि निम्नलिखित में है

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

कार्यशील उदाहरण के लिए, कृपया JsFiddle देखें

— andxyz
स्रोत

1

हाँ, यह एक बेहतर उपाय है, धन्यवाद। अभी भी लाइन-ऊंचाई की आवश्यकता प्रतीत होती है हालांकि jsfiddle.net/paulftw/F3KyK/41

— पॉल

1

मैंने आपके jsfiddle को अपडेट किया कि मैं इसे कैसे करूंगा। मैंने 2x का उपयोग करने के बजाय आइकन के लिए फ़ॉन्ट-आकार का उपयोग किया। jsfiddle.net/3GMjp/1

— -xyz 15

आपके पहले कोड में <span> प्रारंभ टैग समाप्ति </ i> टैग के अनुरूप नहीं है।

— जजाहारुक

कुछ आइकन के साथ काम नहीं करता है। fa-

— angle-

यह महसूस करने के लिए महत्वपूर्ण है कि फॉन्टवॉश js फ़ाइलों सहित भी लुक को संशोधित कर सकते हैं। मेरा आइकन ऊपर तक बहुत दूर था, मैंने यह देखने के लिए js समावेशन को हटा दिया कि अब क्या होगा और अब यह बहुत नीचे तक है

— ।-

53

मैं उस समय के ९९% पाठ के बगल में दिए गए आइकनों का उपयोग करता हूं इसलिए मैंने विश्व स्तर पर बदलाव किया:

.fa-2x {
  vertical-align: middle;
}

आवश्यकतानुसार 3x, 4x आदि को उसी परिभाषा में जोड़ें।

— रश फ्रिसबी
स्रोत

7

मेरी राय में यह स्वीकृत उत्तर होना चाहिए, क्योंकि यह अब तक का सबसे सरल समाधान है, जब तक कि मैं मूल प्रश्न में कुछ याद नहीं करता। धन्यवाद @rushonerok! मुझे यकीन नहीं है कि कुछ लोग उपयोग न करने के लिए क्यों कहते हैं vertical-align: middle;- मुझे यहां कुछ याद आ रहा है। कृपया समझाएं।

— केंडल

1

@ केंडल रोथ मुझे लगता है कि जब लोग कहते हैं कि vertical-align: middleवे उपयोग नहीं करते हैं , तो उनका मतलब है कि यदि आप blockतत्वों का उपयोग कर रहे हैं । आप उपयोग कर रहे हैं inline, inline-blockया table-cell, आप अच्छा होना चाहिए। MDN:vertical-align

— रिनोगो

आकर्षण जैसा काम करता है! साभार: D

— मोहम्मद ए। फादिल

37

सभी सुझाए गए विकल्पों पर विचार करने के बाद, सबसे साफ समाधान लाइन-ऊंचाई और ऊर्ध्वाधर-संरेखित करने के लिए लगता है:

Jsfiddle डेमो देखें

सीएसएस:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

— पॉल
स्रोत

2

क्या होगा यदि आपका कंटेनर 50px से बड़ा है? तब यह काम नहीं करेगा ... मेरे पास सामग्री है जो आकार बदलती है और इसके अंदर आइकन केंद्रित होना चाहिए ... उस बारे में कोई विचार?

— स्लावें टोमैक

24

अगर चीजें अस्तर नहीं हैं, एक सरल line-height: inherit; विशिष्ट i.fa तत्वों पर सीएसएस के माध्यम से जो कि संरेखण मुद्दे हैं, चाल को पर्याप्त रूप से कर सकते हैं।

आप संभवत: एक वैश्विक समाधान का उपयोग कर सकते हैं, जो कि थोड़ी अधिक सीएसएस विशिष्टता के कारण FontAwesome के .fa नियम को ओवरराइड करेगा जो संपत्ति पर line-height: 1आवश्यकता के बिना निर्दिष्ट !importantकरता है:

i.fa {
  line-height: inherit;
}

बस यह सुनिश्चित करें कि उपरोक्त वैश्विक समाधान उन स्थानों में किसी अन्य समस्या का कारण नहीं बनता है जहां आप FontAwesome आइकनों का उपयोग कर सकते हैं।

— purefusion
स्रोत

16

एक फ्लेक्सबॉक्स विकल्प - फ़ॉन्ट भयानक 4.7 और नीचे

FA 4.x होस्ट किया गया URL - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

स्निपेट का विस्तार करें

बेला

http://jsfiddle.net/Hastig/V7DLm/180/

फ्लेक्स और फ़ॉन्ट भयानक 5 का उपयोग करना

FA 5.x होस्ट किया गया URL - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

स्निपेट का विस्तार करें

बेला

https://jsfiddle.net/3bpjvof2/

— हास्टिग ज़ुसमेनस्टेलन
स्रोत

1

यह एक आइकन को एक div के भीतर लंबवत रूप से केन्द्रित कर सकता है, न कि केवल पाठ की एक पंक्ति के भीतर। बहुत अच्छा काम करता है!

— बीन

@ जिसे भी यह संपादित करने की कोशिश करता रहता है - यह आम तौर पर उत्तरों के लिए मेरी लेआउट शैली है। मेरा मानना है कि यह इसे अधिक पठनीय / समझने योग्य बनाता है और लोगों को यह जानने की अनुमति देता है कि वे लिंक पर क्लिक करने से पहले कहां जा रहे हैं। एफए होस्टेड URL के मामले में, कुछ लोगों को इसे कॉपी करने के लिए लिंक को हाइलाइट करने की आदत है, यही कारण है कि यह पूर्ण रूप से लिखा गया है। Jsfiddle लिंक पृष्ठ को बेहतर ढंग से तोड़ने के लिए एक हेडर है, अन्यथा यह याद रखना आसान है और उत्तर क्लॉट किए जा सकते हैं।

— हस्तिग ज़ुसमेनस्टेलन

11

सबसे आसान तरीका है ऊर्ध्वाधर-संरेखित सीएसएस संपत्ति को मध्य में सेट करना

i.fa {
    vertical-align: middle;
}

— ajaali
स्रोत

3

.svg-inline--faFontAwesome 5 के लिए

— darylknight

@darylknight, इसका क्या मतलब है? मैं उसे कैसे सक्रिय / उपयोग करूंगा? fa-clockकक्षा में मेरे बाद कुछ जोड़ें ?

— प्रो। फल्केन

5

इसने मेरे लिए अच्छा काम किया।

i.fa {
  line-height: 100%;
}

— टॉम
स्रोत

3

अपना आइकन सेट करने का प्रयास करें height: 100%

आपको रैपर के साथ कुछ भी करने की आवश्यकता नहीं है (कहते हैं, आपका बटन)।

इसके लिए फ़ॉन्ट विस्मयकारी 5 की आवश्यकता है। निश्चित नहीं है कि यह पुराने एफए संस्करणों के लिए काम करता है या नहीं।

.wrap svg {
    height: 100%;
}

ध्यान दें कि आइकन वास्तव में एक svgग्राफिक है।

डेमो

— mriiiron
स्रोत

2

बूटस्ट्रैप 4 का उपयोग करने वालों के लिए सरल है:

<span class="align-middle"><i class="fas fa-camera"></i></span>

— nscherzer
स्रोत

इसका ऊर्ध्वाधर-संरेखण के रूप में कोई उपयोग नहीं है: मध्य जो इस वर्ग द्वारा लागू किया गया है वह केवल तालिकाओं को लक्षित कर रहा है।

— लुकास मंज़के

1

vertical-alignसंपत्ति के प्रतिशत का उपयोग करके आइकन की लाइन ऊंचाई को ठीक करने का एक और विकल्प है । आमतौर पर, 0% नीचे का हिस्सा होता है, और शीर्ष पर 100%, लेकिन दिलचस्प प्रभाव पैदा करने के लिए कोई नकारात्मक मान या सौ से अधिक का उपयोग कर सकता है।

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

— एरियन अकोस्टा
स्रोत

1

मैं पाठ को लपेटता हूँ ताकि आप इसे अलग से लक्षित कर सकें। अब यदि आप दोनों को छोड़ते हैं और छोड़ते हैं, तो आप ऊर्ध्वाधर की दूरी को नियंत्रित करने के लिए लाइन-ऊंचाई का उपयोग कर सकते हैं। इसे (30px) के समान ऊंचाई पर सेट करने से मध्य संरेखित हो जाएगा। देखें यहाँ ।

नया मार्कअप:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

नया सीएसएस:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

— वेबस्टर गॉर्डन
स्रोत

4

लंबवत-संरेखण ब्लॉक तत्वों पर कुछ भी नहीं करता है , यह केवल इनलाइन या टेबल-सेल तत्वों पर काम करता है।

— cimmanon

मैं देख रहा हूं, लाइन की ऊंचाई = कंटेनर की ऊंचाई और तैरती हुई चीजें काम करती हैं और कम टाइपिंग की जरूरत है। यहाँ शोर कम होने के साथ एक अद्यतन फ़िडेल है

— पॉल

केवल vertical-align: middleआइकन और टेक्स्ट पर सेट करना बेहतर है । इस तरह आप आइकन ऊंचाई के बारे में धारणा नहीं बना रहे हैं और कम सीएसएस है।

— Maros

0

फ्लेक्सबॉक्स का उपयोग करते समय, टेक्स्ट के बगल में फ़ॉन्ट भयानक आइकन के ऊर्ध्वाधर संरेखण बहुत मुश्किल हो सकता है। मैंने हाशिये और पैडिंग की कोशिश की, लेकिन यह सभी वस्तुओं को स्थानांतरित कर दिया। मैंने बिना किसी लाभ के केंद्र, प्रारंभ, आधार रेखा आदि जैसे विभिन्न फ्लेक्स संरेखण की कोशिश की। केवल आइकन को समायोजित करने का सबसे आसान और साफ तरीका यह सेट करना position: relative; top: XX;था कि यह डिव है यह पूरी तरह से काम करता है।

— ADP
स्रोत

0

खैर, यह सवाल सालों पहले पूछा गया था। मुझे लगता है कि तकनीक काफी बदल गई है और ब्राउज़र संगतता काफी बेहतर है। आप वर्टिकल-अलाइन का उपयोग कर सकते हैं लेकिन मैं इस बात पर विचार करूंगा कि कुछ कम मापनीय और कम पुन: प्रयोज्य हैं। मैं एक फ्लेक्सबॉक्स दृष्टिकोण की सिफारिश करूंगा ।

यहाँ एक ही उदाहरण का उपयोग किया गया मूल पोस्टर है, लेकिन फ्लेक्सबॉक्स के साथ। यह एक एकल तत्व को स्टाइल करता है। यदि किसी कारण से बटन का आकार बदलता है, तो यह लंबवत और क्षैतिज रूप से केंद्रित रहेगा।

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

उदाहरण: JsFiddle

— इयान डोनाह्यू
स्रोत

0

बस vertical-alignआइकन तत्व के लिए संपत्ति को परिभाषित करें :

div .icon {
   vertical-align: middle;
}

— ali6p
स्रोत