सीएसएस सिंगल या मल्टीपल लाइन वर्टिकल अलाइन

Question 1

मेरे पास एक शीर्षक है जिसमें एक या अधिक लाइनें हो सकती हैं।

मैं पाठ को लंबवत रूप से कैसे संरेखित कर सकता हूं? अगर यह हमेशा एक लाइन होती तो मैं लाइन की ऊंचाई को कंटेनर की ऊंचाई पर सेट कर सकता था।

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

यदि कंटेनर लाइनों के साथ विस्तार कर सकता है तो यह सही होगा, इसलिए मैं हमेशा ऊपर और नीचे एक ही पैडिंग रख सकता हूं।

यहाँ छवि विवरण दर्ज करें

Question 2

इसके लिए आप display:table-cellसंपत्ति का उपयोग कर सकते हैं:

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}

<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

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

लेकिन यह IE8 और ऊपर काम करता है। अधिक जानकारी के लिए इस लेख को पढ़ें: CSS ट्रिक्स: वर्टीकल सेंटर मल्टी-लेन्ड टेक्स्ट ।

Question 3

यदि आपको यह display:tableचाल पसंद नहीं है (मुझे पता है कि मुझे नहीं पता) तो इसके बिना एक समाधान है:

.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}

HTML के साथ

<div class="cen">
 <p>Text in div 1</p>
</div>

यह div को 5em की ऊँचाई देता है, जब तक कि सामग्री heigher न हो, तब यह बढ़ता है।
इसका जीता जागता उदाहरण है ।

संपादित करें: ओह, यह किस ब्राउज़र पर काम करने वाला है? IE8 सहयोग नहीं करेगा।

(बाद में संपादित करें: क्रोम में मुद्दों को संभालने के लिए अद्यतन सीएसएस)

Question 4

मैं वास्तव में इस समाधान की तरह:

<div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

स्टाइलशीट का उपयोग करने के लिए स्वतंत्र महसूस करें, और ऊंचाई के लिए 100% ...

स्पैन टैग के बीच रिक्त स्थान को भी टिप्पणी करना पड़ सकता है, क्योंकि ये इनलाइन-ब्लॉक हैं

श्रेय पाताल को जाता है । मैं यहाँ से मिल गया

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

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

नोट: यह कई लाइन सामग्री के साथ काम नहीं करता है।

Question 5

उपयोग करने के बजाय vertical-align: centerऔर display: table-cell, आप सीएसएस डिस्प्ले फ्लेक्स नामक नई विधि पर एक नज़र डालना चाहते हैं जो कि बहुत सरल है

.box {
    width: 200px;
    height: 50px; 
    padding: 10px;
    margin-bottom: 20px;
    background-color: red;
    
    /* Only add these 2 lines */
    display: flex;
    align-items: center;
  }

<div class="box">Lorem ipsum dolor</div>
<div class="box">Lorem ipsum dolor sit amet ipsum dolor</div>

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

Question 6

कुछ इस तरह से

एचटीएमएल

<div>
    <p>
       Lorem Ipsum is simply
    </p>
</div>

सीएसएस

div {
   display: table;
}
p {
   display:table-cell;
   vertical-align: middle;
}

Question 7

यदि आप चाहते हैं कि आपका पाठ उत्तरदायी हो, तो शब्दों को एक से कई पंक्तियों में लपेटना, क्योंकि चौड़ाई गतिशील रूप से बदल रही है, inline-blockसहायक के साथ चाल के ऊपर उल्लेखित है (जो कि यहां सर्वोत्तम अनुकूलता है) पर्याप्त नहीं हो सकता है, क्योंकि .inlinehelperनीचे लपेटने वाले पाठ को धक्का दे सकता है।
इस तरह के एक simpel कार्य के लिए पूरा समाधान है:

HTML:

<div id="responsive_wrap">
    <span class="inlinehelper"><span id="content">        
</div>

सीएसएस:

#responsive_wrap {   
   display: block;    
   height: 100%; //dimensions just for   
   width: 100%;  //example's sake
   white-space: nowrap;
}

#content {   
   display: inline-block;        
   white-space: initial;
}

.inlinehelper {
   height: 100%;    
   width: 0;
   vertical-align: middle;
   display: inline-block;
}

white-space:nowrapसंपत्ति को नोटिस करें , जो एक दूसरे के संबंध में रोकता है .inlinehelperऔर #contentलपेटता है। white-space:initialपर #contentके लिए रैप करने के लिए फिर सेट करता है की क्षमता spanही;

एक अन्य विकल्प: व्यक्तिगत प्राथमिकता का मामला। आप के बजाय एक छद्म तत्व का उपयोग कर सकते हैं .inlinehelper। .inlinehelperसीएसएस नियम और तत्व निकालें और इस छद्म तत्व सीएसएस चयनकर्ता को जोड़ें:

#responsive_wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
}

पुनश्च: मुझे पता चला कि यह वास्तव में बहुत पुराना प्रश्न है, इसलिए इस उत्तर को दें, शायद यह किसी के लिए उपयोगी होगा।

Question 8

स्टाइलिंग वार, आपकी सामग्री को लेआउट करने के लिए एक तालिका सबसे अच्छा तरीका होगा (सीएसएस में स्टाइल टैग लगाएं):

<table style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
    <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td>
    <td style="width:50px;vertical-align:top;color:white;">1 Line</td>
</tr>

लाइन गणना के लिए जेएस स्क्रिप्ट की आवश्यकता होगी, यहां एक नज़र डालें:

http://www.webdeveloper.com/forum/archive/index.php/t-44333.html

Question 9

मुझे उस तरह का समाधान पसंद है। मैंने देखा कि कहीं यह चाल स्टैकओवरफ्लो में नहीं है, लेकिन याद नहीं है कि वास्तव में कहां है। बहुत उपयोग! :)

ul {
background: #000; 
  padding-left: 0;
}
ul li {
  height: 130px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid #F7F7F7;
}
ul li:last-of-type {
  border-bottom: none;
}
ul li:after {
  color: #333;
  position: absolute;
  right: 35px;
  font-size: 40px;
  content: ">";
  top: 50%;
  margin-top: -24px;
  color: #FFDA00;
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
ul li a {
  font-size: 35px;
  font-family: Arial;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
  height: 100%;
  line-height: 38px;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
ul li a:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
ul li a span {
  display: inline-block;
  vertical-align: middle;
}

<ul>
	<li class="dn">
		<a href="kapec.ru.php"><span> Lorem ipsum 1 LINE</span></a>
		</li>
		<li>
			<a href="varianti.ru.php"><span>Lorem ipsum <br> 2 lines </span></a>
		</li>

	</ul>

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