Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से एलिमेंट को वर्टिकली और हॉरिजॉन्टली सेंटर कैसे करें?


CSS से एलिमेंट को वर्टिकली और हॉरिजॉन्टली सेंटर करने के लिए, कोड निम्नानुसार है -

उदाहरण

<!DOCTYPE html> <html> <head> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .centered {       display: flex;       justify-content: center;       align-items: center;       height: 200px;       border: 3px solid rgb(0, 70, 128);    } </style> </head> <body> <h1>Centering Example</h1> <div class="centered"> <h2>This text is centered vertically and horizontally both</h2> </div> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

CSS से एलिमेंट को वर्टिकली और हॉरिजॉन्टली सेंटर कैसे करें?


  1. CSS और JavaScript से ट्री व्यू कैसे बनाएं? CSS और JavaScript से ट्री व्यू कैसे बनाएं?

    CSS और JavaScript से ट्री व्यू बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI&q

  1. CSS से वेबसाइट को क्षैतिज रूप से केंद्रित कैसे करें? CSS से वेबसाइट को क्षैतिज रूप से केंद्रित कैसे करें?

    उदाहरण CSS से अपनी वेबसाइट को क्षैतिज रूप से केंद्रित करने के लिए, निम्न कोड का उपयोग करें: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       backgrou

  1. CSS के साथ किसी एलिमेंट को सर्कुलर पथ में कैसे मूव करें CSS के साथ किसी एलिमेंट को सर्कुलर पथ में कैसे मूव करें

    परिचय CSS एनिमेशन transform फंक्शन्स को संयोजित, रोटेट, और ट्रांसलेट करके एलिमेंट्स को विभिन्न तरीकों से ट्रांसफॉर्म करने में हमारी मदद कर सकते हैं। उदाहरण: CSS ट्रांसफॉर्म के साथ सर्कुलर मोशन <!DOCTYPE html> <html> <head> <style> div { margin: 8%; width: