html - क्षैतिज रूप से<div> कैसे केन्द्रित करें?
css alignment (20)
मैं क्षैतिज रूप से <div>
किसी अन्य <div>
को सीएसएस का उपयोग करके कैसे केंद्रित कर सकता हूं?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
केवल क्षैतिज केंद्रित
मेरे अनुभव में, क्षैतिज रूप से बॉक्स को केन्द्रित करने का सबसे अच्छा तरीका निम्न गुणों को लागू करना है:
बर्तन:
-
text-align: center;
होना चाहिएtext-align: center;
सामग्री बॉक्स:
-
display: inline-block;
होना चाहिएdisplay: inline-block;
डेमो:
.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="container">
<div class="centered-content">
Center this!
</div>
</div>
यह पहेली भी देखें!
क्षैतिज और लंबवत दोनों केंद्रित
मेरे अनुभव में, लंबवत और क्षैतिज दोनों बॉक्स को केन्द्रित करने का सबसे अच्छा तरीका एक अतिरिक्त कंटेनर का उपयोग करना और निम्न गुणों को लागू करना है:
बाहरी कंटेनर:
-
display: table;
होना चाहिएdisplay: table;
आंतरिक कंटेनर:
-
display: table-cell;
होना चाहिएdisplay: table-cell;
-
vertical-align: middle;
होना चाहिएvertical-align: middle;
-
text-align: center;
होना चाहिएtext-align: center;
सामग्री बॉक्स:
-
display: inline-block;
होना चाहिएdisplay: inline-block;
डेमो:
.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
यह पहेली भी देखें!
पाठ-संरेखण: केंद्र
text-align: center
लागू करना text-align: center
लाइनलाइन के भीतर इनलाइन सामग्री text-align: center
केंद्रित है। हालांकि आंतरिक आवरण डिफ़ॉल्ट width: 100%
आपको एक विशिष्ट चौड़ाई निर्धारित करना है या निम्न में से एक का उपयोग करना है:
#inner {
display: inline-block;
}
#outer {
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
मार्जिन: 0 ऑटो
margin: 0 auto
का उपयोग करना margin: 0 auto
एक और विकल्प है और यह पुराने ब्राउज़र संगतता के लिए अधिक उपयुक्त है। यह display: table
साथ मिलकर काम करता है display: table
।
#inner {
display: table;
margin: 0 auto;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
flexbox
display: flex
ब्लॉक तत्व की तरह व्यवहार करता है और फ्लेक्सबॉक्स मॉडल के अनुसार अपनी सामग्री देता है। यह justify-content: center
साथ काम करता justify-content: center
।
कृपया ध्यान दें: फ्लेक्सबॉक्स अधिकांश ब्राउज़रों के साथ संगत है लेकिन सभी नहीं। ब्राउज़र संगतता की एक पूर्ण और अद्यतित सूची के लिए here देखें।
#inner {
display: inline-block;
}
#outer {
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
परिवर्तन
transform: translate
आपको सीएसएस विजुअल फॉर्मेटिंग मॉडल के समन्वय स्थान को संशोधित करने देता है। इसका उपयोग करके, तत्वों का अनुवाद, घूर्णन, स्केल किया गया और तिरछा किया जा सकता है। क्षैतिज रूप से केंद्र के लिए इसे position: absolute
आवश्यकता होती है position: absolute
और left: 50%
।
#inner {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
<center>
(बहिष्कृत)
टैग <center>
text-align: center
लिए HTML विकल्प है text-align: center
। यह पुराने ब्राउज़र और अधिकांश नए लोगों पर काम करता है लेकिन इसे एक अच्छा अभ्यास नहीं माना जाता है क्योंकि यह सुविधा obsolete और इसे वेब मानकों से हटा दिया गया है।
#inner {
display: inline-block;
}
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>
आप इस सीएसएस को आंतरिक <div>
लागू कर सकते हैं:
#inner {
width: 50%;
margin: 0 auto;
}
बेशक, आपको width
को 50%
तक सेट करने की आवश्यकता नहीं है। युक्त <div>
से कम की कोई भी चौड़ाई काम करेगी। margin: 0 auto
वास्तविक केंद्रिंग क्या करता है।
यदि आप IE8 + को लक्षित कर रहे हैं, तो इसके बजाय यह बेहतर हो सकता है:
#inner {
display: table;
margin: 0 auto;
}
यह आंतरिक तत्व केंद्र को क्षैतिज रूप से बनाएगा और यह एक विशिष्ट width
को सेट किए बिना काम करता है।
यहां उदाहरण काम करना:
#inner {
display: table;
margin: 0 auto;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
आप ऐसा कुछ कर सकते हैं
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
यह लंबवत #inner
को भी संरेखित करेगा। यदि आप नहीं चाहते हैं, तो display
और vertical-align
गुणों को हटा दें;
एक विकल्प मौजूद था कि मैंने पाया:
हर कोई उपयोग करने के लिए कहता है:
margin: auto 0;
लेकिन एक और विकल्प है। इस संपत्ति को पैरेंट div के लिए सेट करें। यह किसी भी समय पूरी तरह से काम करता है:
text-align: center;
और देखो, बच्चे जाओ केंद्र।
और अंत में आपके लिए सीएसएस:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}
कुछ पोस्टर्स ने display:box
का उपयोग कर केंद्र में सीएसएस 3 तरीके का उल्लेख किया है display:box
।
यह वाक्यविन्यास पुराना है और अब इसका उपयोग नहीं किया जाना चाहिए। [ यह पोस्ट भी देखें ] ।
तो फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल का उपयोग कर सीएसएस 3 में केंद्र करने का नवीनतम तरीका यहां पूर्णता के लिए है।
तो यदि आपके पास सरल मार्कअप है:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
... और आप अपने आइटम को बॉक्स के भीतर केंद्रित करना चाहते हैं, यहां आपको मूल तत्व (.box) पर क्या चाहिए:
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
.box {
display: flex;
flex-wrap: wrap;
/* Optional. only if you want the items to wrap */
justify-content: center;
/* For horizontal alignment */
align-items: center;
/* For vertical alignment */
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.box {
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid tomato;
}
.box div {
margin: 0 10px;
width: 100px;
}
.item1 {
height: 50px;
background: pink;
}
.item2 {
background: brown;
height: 100px;
}
.item3 {
height: 150px;
background: orange;
}
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
यदि आपको पुराने ब्राउज़र का समर्थन करने की आवश्यकता है जो फ्लेक्सबॉक्स के लिए पुराने सिंटैक्स का उपयोग करते हैं तो here's एक अच्छी जगह है।
खैर, मैं एक समाधान खोजने में कामयाब रहा जो शायद सभी परिस्थितियों में फिट होगा, लेकिन जावास्क्रिप्ट का उपयोग करता है:
यहां संरचना है:
<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>
और यहां जावास्क्रिप्ट स्निपेट है:
$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
यदि आप इसे उत्तरदायी दृष्टिकोण में उपयोग करना चाहते हैं, तो आप निम्न जोड़ सकते हैं:
$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
जिस तरह से मैं आमतौर पर करता हूं वह पूर्ण स्थिति का उपयोग कर रहा है:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
इस काम के लिए बाहरी div को किसी भी अतिरिक्त संपत्ति की आवश्यकता नहीं है।
फ़ायरफ़ॉक्स और क्रोम के लिए:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
इंटरनेट एक्सप्लोरर, फ़ायरफ़ॉक्स और क्रोम के लिए:
<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
text-align:
आधुनिक ब्राउज़र के लिए संपत्ति वैकल्पिक है, लेकिन यह विरासत ब्राउज़र समर्थन के लिए इंटरनेट एक्सप्लोरर क्विर्क मोड में आवश्यक है।
फ्लेक्स में 97% से अधिक ब्राउज़र समर्थन कवरेज है और कुछ लाइनों के भीतर इस तरह की समस्याओं को हल करने का सबसे अच्छा तरीका हो सकता है:
#outer {
display: flex;
justify-content: center;
}
मुझे एहसास है कि मैं खेल के लिए बहुत देर हो चुकी हूं, लेकिन यह एक बहुत ही लोकप्रिय सवाल है, और मुझे हाल ही में एक ऐसा दृष्टिकोण मिला है जिसे मैंने यहां कहीं भी नहीं देखा है, इसलिए मुझे लगा कि मैं इसे दस्तावेज दूंगा।
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
संपादित करें: दोनों तत्वों को सही ढंग से कार्य करने के लिए एक ही चौड़ाई होना चाहिए।
मुझे हाल ही में एक "छुपा" div (यानी, डिस्प्ले: कोई नहीं;) केंद्रित करना पड़ा था, जिसमें उसमें एक सक्षम रूप था जिसे पृष्ठ पर केंद्रित करने की आवश्यकता थी। मैंने छिपी हुई div को प्रदर्शित करने के लिए निम्न jQuery लिखा और फिर तालिका की स्वत: जेनरेट की चौड़ाई में सीएसएस अपडेट करें और मार्जिन को केंद्र में बदलें। (डिस्प्ले टॉगल एक लिंक पर क्लिक करके ट्रिगर किया जाता है, लेकिन यह कोड प्रदर्शित करने के लिए आवश्यक नहीं था।)
नोट: मैं इस कोड को साझा कर रहा हूं क्योंकि Google ने मुझे इस स्टैक ओवरफ़्लो समाधान में लाया है और सबकुछ काम करता होगा सिवाय इसके कि छिपा तत्वों की कोई चौड़ाई नहीं है और उन्हें प्रदर्शित होने के बाद तक आकार / केंद्रित नहीं किया जा सकता है।
$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>
यदि आप आंतरिक div
पर निश्चित चौड़ाई निर्धारित नहीं करना चाहते हैं तो आप ऐसा कुछ कर सकते हैं:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
यह आंतरिक div
को एक इनलाइन तत्व में बनाता है जिसे text-align
साथ केंद्रित किया जा सकता है।
यदि आप इसे चौड़ाई नहीं देते हैं तो इसे केंद्रित नहीं किया जा सकता है, अन्यथा यह पूरी क्षैतिज स्थान डिफ़ॉल्ट रूप से ले जाएगा।
यह मेरा जवाब है।
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
यह विधि भी ठीक काम करती है:
div.container {
display: flex;
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
आंतरिक <div>
, केवल एक शर्त यह है कि इसकी height
और width
इसके कंटेनर के मुकाबले बड़ी नहीं होनी चाहिए।
सबसे अच्छा दृष्टिकोण सीएसएस 3 के साथ हैं।
बॉक्स मॉडल:
#outer{
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner{
width: 50%;
}
आपकी उपयोगिता के अनुसार आप box-orient, box-flex, box-direction
गुणों का भी उपयोग कर सकते हैं।
फ्लेक्स :
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
बाल तत्वों को केंद्रित करने के बारे में और पढ़ें
और यह बताता है कि बॉक्स मॉडल सबसे अच्छा तरीका क्यों है :
सबसे आसान तरीका:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
#outer {
width:100%;
height:100%;
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
}
width
निर्धारित करें और margin-left
और margin-right
auto
। हालांकि, यह केवल क्षैतिज के लिए है । यदि आप दोनों तरीकों से चाहते हैं, तो आप इसे दोनों तरीकों से करेंगे। प्रयोग करने से डरो मत; ऐसा नहीं है कि आप कुछ तोड़ देंगे।