डिव में टेक्स्ट को लंबवत रूप से कैसे संरेखित करें

डिव के साथ काम करते समय, कभी-कभी यह सुनिश्चित करना आवश्यक होता है कि इसके भीतर का टेक्स्ट संरेखित हो बीच में लंबवत. इसे विभिन्न विधियों के माध्यम से प्राप्त किया जा सकता है। सीएसएस संपत्ति.

#abc { ऊंचाई: 50px; लाइन-ऊंचाई: 50px; }यह टेक्स्ट को डिव के भीतर लंबवत रूप से केंद्रित करेगा।

#abc {
  height: 50px;
  line-height: 50px;
}

मल्टी-लाइन टेक्स्ट के लिए, आप इसे एक में लपेट सकते हैं तत्व को फैलाएं और प्रदर्शन गुण लागू करें और लंबवत-संरेखित करें।

#abc { प्रदर्शन: तालिका; चौड़ाई: 100%; } #एबीसी स्पैन { प्रदर्शन: टेबल-सेल; लंबवत-संरेखित करें: मध्य; }

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

#abc { स्थिति: सापेक्ष; } #एबीसी पी { स्थिति: निरपेक्ष; शीर्ष: 50%; परिवर्तन: TranslateY(-50%); }