मैं सीएसएस का उपयोग करके एक <div>
दूसरे के भीतर क्षैतिज रूप से केंद्र कैसे कर सकता हूं <div>
?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
मैं सीएसएस का उपयोग करके एक <div>
दूसरे के भीतर क्षैतिज रूप से केंद्र कैसे कर सकता हूं <div>
?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
जवाबों:
आप इस CSS को भीतर तक लागू कर सकते हैं <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
बेशक, आप स्थापित करने के लिए की जरूरत नहीं है width
करने के लिए 50%
। युक्त से कम कोई भी चौड़ाई <div>
काम करेगी। margin: 0 auto
क्या वास्तविक केंद्रित करता है।
यदि आप Internet Explorer 8 (और बाद में) को लक्षित कर रहे हैं , तो इसके बजाय ऐसा होना बेहतर हो सकता है:
#inner {
display: table;
margin: 0 auto;
}
यह आंतरिक तत्व केंद्र को क्षैतिज रूप से बनाएगा और यह एक विशिष्ट सेटिंग के बिना काम करता है width
।
यहाँ काम कर उदाहरण:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
margin-left: auto; margin-right: auto
मुझे लगता है।
margin:0 auto
: यह margin: <whatever_vertical_margin_you_need> auto
दूसरा क्षैतिज मार्जिन हो सकता है।
यदि आप आंतरिक पर एक निश्चित चौड़ाई निर्धारित नहीं करना चाहते हैं तो div
आप कुछ इस तरह कर सकते हैं:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
जो भीतर div
को एक इनलाइन तत्व बनाता है जिसे केंद्र में रखा जा सकता है text-align
।
float: none;
और शायद इसकी आवश्यकता केवल इसलिए है क्योंकि #inner को आपके CSS में या float
तो left
या right
कहीं और से विरासत में मिला है ।
text-align
आप आंतरिक के सेट कर सकते हैं तो text-align
करने के लिए initial
या कुछ अन्य मूल्य।
सबसे अच्छा दृष्टिकोण सीएसएस 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%;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
अपनी उपयोगिता के अनुसार आप box-orient, box-flex, box-direction
गुणों का उपयोग भी कर सकते हैं।
फ्लेक्स :
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
और यह बताता है कि बॉक्स मॉडल सबसे अच्छा तरीका क्यों है :
-webkit
flexbox के लिए झंडे ( display: -webkit-flex;
और -webkit-align-items: center;
और -webkit-justify-content: center;
)
मान लीजिए कि आपका div 200 पिक्सेल चौड़ा है:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
सुनिश्चित करें कि पेरेंट तत्व है तैनात , यानी, रिश्तेदार, स्थिर, पूर्ण, या चिपचिपा।
यदि आप अपनी div की चौड़ाई नहीं जानते हैं, तो आप transform:translateX(-50%);
ऋणात्मक मार्जिन के बजाय उपयोग कर सकते हैं ।
https://jsfiddle.net/gjvfxxdj/
साथ सीएसएस calc () , कोड और भी आसान प्राप्त कर सकते हैं:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
सिद्धांत अभी भी वही है; आइटम को बीच में रखें और चौड़ाई के लिए क्षतिपूर्ति करें।
मैंने यह उदाहरण बनाया है कि कैसे लंबवत और क्षैतिज रूप से दिखाया जाए align
।
कोड मूल रूप से यह है:
#outer {
position: relative;
}
तथा...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
और यह तब भी रहेगा center
जब आप अपनी स्क्रीन का आकार बदल लेंगे ।
कुछ पोस्टरों ने सीएसएस 3 का उपयोग करके केंद्र में जाने का रास्ता बताया है display:box
।
यह सिंटैक्स पुराना है और इसका अब उपयोग नहीं किया जाना चाहिए। [यह भी देखें इस पोस्ट] ।
तो बस पूर्णता के लिए यहां फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल का उपयोग करके CSS 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 */
}
यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है जो फ्लेक्सबॉक्स के लिए पुराने सिंटैक्स का उपयोग करते हैं तो यहां एक अच्छी जगह है।
flex-direction
मूल्य पर निर्भर करता है । यदि यह 'पंक्ति' (डिफ़ॉल्ट) है - तो justify-content: center;
क्षैतिज संरेखण के लिए है (जैसे मैंने उत्तर में उल्लेख किया है) यदि यह 'कॉलम' है - तो justify-content: center;
ऊर्ध्वाधर संरेखण के लिए है।
यदि आप एक निश्चित चौड़ाई निर्धारित नहीं करना चाहते हैं और अतिरिक्त मार्जिन नहीं चाहते हैं, तो display: inline-block
अपने तत्व में जोड़ें ।
आप उपयोग कर सकते हैं:
#element {
display: table;
margin: 0 auto;
}
display: table;
। यह क्या करता है?
क्षैतिज और लंबवत। यह यथोचित आधुनिक ब्राउज़रों (फ़ायरफ़ॉक्स, सफारी / वेबकीट, क्रोम, इंटरनेट एक्सप्लोरर 10, ओपेरा, आदि) के साथ काम करता है।
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>
यदि आप इसे चौड़ाई नहीं देते हैं तो यह केंद्रित नहीं हो सकता। अन्यथा, यह डिफ़ॉल्ट रूप से, संपूर्ण क्षैतिज स्थान लेगा।
width: fit-content;
और margin: 0 auto
। मुझे लगता है कि यह अज्ञात चौड़ाई के साथ काम कर सकता है।
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
मुझे हाल ही में एक "छिपी हुई" डिव (यानी display:none;
) को केंद्र में रखना था , जिसके भीतर एक संक्षिप्त रूप था जो पृष्ठ पर केंद्रित होने की आवश्यकता थी। मैंने छिपे हुए डिव को प्रदर्शित करने के लिए निम्नलिखित 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>
जिस तरह से मैं आम तौर पर यह कर रहा हूँ पूर्ण स्थिति का उपयोग कर रहा है:
#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:
संपत्ति आधुनिक ब्राउज़रों के लिए वैकल्पिक है, लेकिन यह लीगेसी ब्राउज़र समर्थन के लिए इंटरनेट एक्सप्लोरर असामान्य मोड में आवश्यक है।
उपयोग:
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
तत्वों में से एक के लिए एक चौड़ाई निर्धारित किए बिना इसके लिए एक और समाधान सीएसएस 3 transform
विशेषता का उपयोग कर रहा है ।
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
चाल यह है कि तत्व को अपनी चौड़ाई के बाईं ओर 50 प्रतिशत translateX(-50%)
सेट करता है #inner
। आप ऊर्ध्वाधर संरेखण के लिए एक ही चाल का उपयोग कर सकते हैं।
यहाँ एक फिडल है जो क्षैतिज और ऊर्ध्वाधर संरेखण दिखा रहा है।
अधिक जानकारी मोज़िला डेवलपर नेटवर्क पर है ।
-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
क्रिस कॉयियर जिन्होंने अपने ब्लॉग पर 'सेंटरिंग इन द अननोन' पर एक उत्कृष्ट पोस्ट लिखी । यह कई समाधानों का एक राउंडअप है। मैंने एक पोस्ट किया है जो इस प्रश्न में पोस्ट नहीं किया गया है। इसमें फ्लेक्सबॉक्स समाधान की तुलना में अधिक ब्राउज़र समर्थन है , और आप इसका उपयोग नहीं कर रहे हैं display: table;
जो अन्य चीजों को तोड़ सकता है।
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
मुझे हाल ही में एक दृष्टिकोण मिला:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
दोनों तत्वों को सही ढंग से कार्य करने के लिए समान चौड़ाई होनी चाहिए।
#inner
केवल: #inner { position:relative; left:50%; transform:translateX(-50%); }
। यह किसी भी चौड़ाई के लिए काम करता है।
उदाहरण के लिए, इस लिंक और नीचे दिए गए स्निपेट को देखें:
div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>
यदि आपके पास माता-पिता के तहत बहुत सारे बच्चे हैं, तो आपकी सीएसएस सामग्री फ़िडल पर इस उदाहरण की तरह होनी चाहिए ।
HTML सामग्री लुक इसे पसंद करती है:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
फिर इस उदाहरण को बेला पर देखें ।
मेरे अनुभव में, एक बॉक्स को क्षैतिज रूप से केंद्र में रखने का सबसे अच्छा तरीका निम्नलिखित गुणों को लागू करना है:
text-align: center;
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-cell;
vertical-align: middle;
text-align: center;
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>
यह भी देखें फिडल !
सबसे आसान तरीका:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
#outer
हमेशा डिफ़ॉल्ट width:100%;
रूप से किसी भी आवश्यकता नहीं होती <div>
है width:100%
। और text-align:center
यह भी एक आवश्यक नहीं है।
यदि सामग्री की चौड़ाई अज्ञात है, तो आप निम्न विधि का उपयोग कर सकते हैं । मान लें कि हमारे पास ये दो तत्व हैं:
.outer
-- पूर्ण चौड़ाई.inner
- कोई चौड़ाई सेट नहीं (लेकिन अधिकतम-चौड़ाई निर्दिष्ट की जा सकती है)मान लीजिए कि तत्वों की गणना चौड़ाई क्रमशः 1000 पिक्सेल और 300 पिक्सेल है। निम्नलिखित के रूप में आगे बढ़ें:
.inner
अंदर लपेटो.center-helper
.center-helper
एक इनलाइन ब्लॉक; यह .inner
300 पिक्सल्स चौड़े बनाने के समान आकार का हो जाता है ।.center-helper
अपने माता-पिता के सापेक्ष 50% सही धक्का ; यह इसके बाईं ओर 500 पिक्सल के wrt पर है। बाहरी।.inner
50% अपनी मूल के सापेक्ष छोड़ दिया; यह अपने बाएँ -150 पिक्सेल के स्थान पर है। सेंटर हेल्पर जिसका मतलब है कि इसका लेफ्ट 500 - 150 = 350 पिक्सल है। बाहरी।.outer
क्षैतिज स्क्रॉलबार को रोकने के लिए छिपे हुए पर अतिप्रवाह सेट करें ।डेमो:
body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}
<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</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
संपत्तियों को हटा दें ;
यहां आप सबसे छोटे तरीके से चाहते हैं।
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
text-align: center
इनलाइन सामग्री को लागू करना लाइन बॉक्स के भीतर केंद्रित है। हालाँकि चूंकि आंतरिक div में डिफ़ॉल्ट रूप से width: 100%
आपको एक विशिष्ट चौड़ाई निर्धारित करनी होती है या निम्न में से किसी एक का उपयोग करना होता है:
का उपयोग करना margin: 0 auto
एक और विकल्प है और यह पुराने ब्राउज़र संगतता के लिए अधिक उपयुक्त है। यह साथ काम करता है display: table
।
display: flex
एक ब्लॉक तत्व की तरह व्यवहार करता है और फ्लेक्सबॉक्स मॉडल के अनुसार इसकी सामग्री को बाहर करता है। इसके साथ काम करता है justify-content: center
।
कृपया ध्यान दें: फ्लेक्सबॉक्स अधिकांश ब्राउज़रों के साथ संगत है लेकिन सभी नहीं। ब्राउज़र संगतता की पूर्ण और अद्यतित सूची के लिए यहां देखें ।
transform: translate
आपको सीएसएस दृश्य प्रारूपण मॉडल के समन्वय स्थान को संशोधित करने देता है। इसका उपयोग करते हुए, तत्वों का अनुवाद, घुमाया, बढ़ाया और तिरछा किया जा सकता है। क्षैतिज रूप से केंद्र में इसकी आवश्यकता होती है position: absolute
औरleft: 50%
।
<center>
(अनुचित)टैग <center>
HTML विकल्प है text-align: center
। यह पुराने ब्राउज़र और अधिकांश नए पर काम करता है लेकिन यह एक अच्छा अभ्यास नहीं माना जाता है क्योंकि यह सुविधा अप्रचलित है और इसे वेब मानकों से हटा दिया गया है।
आप display: flex
अपने बाहरी div के लिए और क्षैतिज केंद्र के लिए उपयोग कर सकते हैं जिसे आपको जोड़ना हैjustify-content: center
#outer{
display: flex;
justify-content: center;
}
या आप अधिक विचारों के लिए w3schools - CSS flex प्रॉपर्टी पर जा सकते हैं ।
फ्लेक्स में 97% से अधिक ब्राउज़र समर्थन कवरेज है और कुछ लाइनों के भीतर इस तरह की समस्याओं को हल करने का सबसे अच्छा तरीका हो सकता है:
#outer {
display: flex;
justify-content: center;
}
खैर, मैं एक समाधान खोजने में कामयाब रहा जो शायद सभी स्थितियों में फिट होगा, लेकिन जावास्क्रिप्ट का उपयोग करता है:
यहाँ संरचना है:
<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);
})
});
यह विधि भी ठीक काम करती है:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
भीतर के लिए <div>
, केवल शर्त यह है कि इसका height
और width
इसके कंटेनर से बड़ा नहीं होना चाहिए।
एक विकल्प मौजूद था कि मैंने पाया:
उपयोग करने के लिए हर कोई कहता है:
margin: auto 0;
लेकिन एक और विकल्प है। इस गुण को पैरेंट डिव के लिए सेट करें। यह कभी भी पूरी तरह से काम करता है:
text-align: center;
और देखो, बच्चा केंद्र जाता है।
और अंत में आपके लिए CSS:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}