पाठ की एक पंक्ति में एक इनलाइन-ब्लॉक को कैसे लंबवत संरेखित करें?

Question

मैं एक इनलाइन-ब्लॉक बनाना चाहता हूं जो कुछ अज्ञात चौड़ाई और ऊंचाई पर ले जाएगा। (यह गतिशील रूप से उत्पन्न सामग्री के साथ इसके अंदर एक टेबल होगा)। इसके अलावा, इनलाइन-ब्लॉक को पाठ की एक पंक्ति के अंदर रखा जाना चाहिए, जैसे "मेरा पाठ (ब्लॉक यहां)"। यह सुंदर दिखने के लिए, मैं ब्लॉक को लाइन में लंबवत बनाने की कोशिश कर रहा हूं । तो अगर ब्लॉक इस तरह दिखता है:

TOP
MIDDLE
BOTTOM

तब पाठ की पंक्ति पढ़ेगी: "मेरा पाठ ([मिडिल])" (ऊपर और नीचे के बीच TOP और BOTTOM के साथ)

यहाँ मेरे पास अभी तक क्या है।

सीएसएस

.example {
  background-color: #0A0;
  display: inline-block;
  margin: 2px;
  padding: 2px;
  position: relative;
  text-align: center;
}

एचटीएमएल

<div class="example">TOP<br />MIDDLE<br />BOTTOM</div>

Comments

हो सकता है कि आप इसे आकर्षित करें और जो आप चाहते हैं उसकी एक छवि पोस्ट करें। शायद यह मैं हूं, लेकिन मुझे नहीं पता कि आप क्या पूछ रहे हैं।

— ब्रेंट फ्रायर

Answer 1

code {
    background: black;
    color: white;
    display: inline-block;
    vertical-align: middle;
}

<p>Some text <code>A<br />B<br />C<br />D</code> continues afterward.</p>

परीक्षण और सफारी 5 और IE6 + में काम करता है।

Comments

मैंने एक समान समस्या पर आपके समाधान का उपयोग किया है, लेकिन मैं एक सीएसएस ट्राइएंगल को केंद्रित करने की कोशिश कर रहा हूं। हालाँकि, यह पूरी तरह से केंद्रित नहीं है। मैं इसे पूरी तरह से केंद्रित करने के लिए आपके नुस्खा में क्या जोड़ सकता हूं?

— CodyBugstein

@ स्थिति: रिश्तेदार?

— नीनो acकोपैक 20

Answer 2

display: inline-block क्या आपका दोस्त आपको निर्माण के सभी तीन हिस्सों की आवश्यकता है - पहले, "ब्लॉक", बाद में - एक होने के लिए, फिर आप उन सभी को मध्य में संरेखित कर सकते हैं:

काम करने का उदाहरण

(यह वैसे भी आपकी तस्वीर की तरह दिखता है;))

सीएसएस:

p, div {
  display: inline-block; 
  vertical-align: middle;
}
p, div {
  display: inline !ie7; /* hack for IE7 and below */
}

table {
  background: #000; 
  color: #fff; 
  font-size: 16px; 
  font-weight: bold; margin: 0 10px;
}

td {
  padding: 5px; 
  text-align: center;
}

HTML:

<p>some text</p> 
<div>
  <table summary="">
  <tr><td>A</td></tr>
  <tr><td>B</td></tr>
  <tr><td>C</td></tr>
  <tr><td>D</td></tr>
  </table>
</div> 
<p>continues afterwards</p>