css - पेज के मध्य(क्षैतिज/चौड़ाई) में<div> को संरेखित कैसे करें




html alignment (17)

मेरे पास width सेट 800px के साथ एक div टैग है। जब ब्राउज़र की चौड़ाई 800px से अधिक हो, तो इसे div को नहीं बढ़ाया जाना चाहिए, लेकिन इसे पृष्ठ के मध्य में ले जाना चाहिए।


  1. क्या आपका मतलब है कि आप इसे लंबवत या क्षैतिज रूप से केंद्रित करना चाहते हैं? आपने कहा कि आपने 800px तक height निर्दिष्ट की है, और चाहते थे कि div को तब तक नहीं फैलाया जाए जब width उस से अधिक हो ...

  2. क्षैतिज रूप से केंद्र करने के लिए, आप margin: auto; उपयोग कर सकते हैं margin: auto; सीएसएस में विशेषता। साथ ही, आपको यह सुनिश्चित करना होगा कि body और html तत्वों में कोई मार्जिन या पैडिंग नहीं है:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }

Div चौड़ाई निर्दिष्ट किए बिना केंद्र:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

यह <center> टैग की तरह कुछ है, सिवाय इसके कि:

  • <center> सभी प्रत्यक्ष इनलाइन बच्चों के तत्व (उदाहरण के लिए <h1> ) <center> भी स्थित होंगे
  • ब्राउज़र डिफ़ॉल्ट के अनुसार इनलाइन-ब्लॉक तत्व में अलग-अलग आकार ( display:block करने के लिए comapred display:block सेटिंग) हो सकता है

आप इसे इस तरह इस्तेमाल भी कर सकते हैं:

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>

इंटरनेट एक्सप्लोरर 6 में इसे सही तरीके से काम करने के लिए आपको इसे निम्नानुसार करना होगा:

एचटीएमएल

<body>
    <div class="centered">
        centered content
    </div>
</body>

सीएसएस

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}

पुराना कोड से कुछ अन्य पूर्व-मौजूदा सेटअप जो एल एंड आर केंद्रित करने वाले div पेज को रोक देंगे: 1) बाहरी स्टाइलशीट लिंक में छिपा अन्य वर्ग। 2) किसी अन्य आईएमजी की तरह एम्बेडेड अन्य वर्ग (जैसे पुराने बाहरी सीएसएस प्रिंट प्रारूप नियंत्रण के लिए)। 3) आईडी और / या क्लास के साथ किंवदंती कोड नामित div वर्ग के साथ संघर्ष करेगा।


बहुत सारे उत्तरों के साथ एक बहुत पुराना सवाल, लेकिन किसी कारण से उनमें से कोई भी वास्तव में मेरे लिए काम नहीं करता था। यह मेरे लिए काम करता है और यह ब्राउज़र में भी काम करता है:

.center {
    text-align: center;
    height: 100%;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
}

मेरे मामले में, फोन स्क्रीन का आकार अज्ञात है, मैंने यही किया है।

एचटीएमएल

<div class="loadingImg"></div>

सीएसएस

.loadingImg{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999;
    border:0;
    background: url('../images/loading.gif') no-repeat center;
    background-size: 50px 50px;
    display: block;
    margin: 0 auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

जेएस (इससे पहले कि आपको यह डीआईवी दिखाना पड़े)

$(".loadingImg").css("height",$(document).height());     
$(".loadingImg").css("width",$(document).width());     
$(".loadingImg").show(); 

मॉडर्न Flexbox समाधान 2015 से / 2015 में जाने का तरीका है। justify-content: center का उपयोग मूल तत्व के लिए सामग्री को संरेखित करने के लिए किया जाता है।

एचटीएमएल

<div class="container">
  <div class="center">Center</div>
</div>

सीएसएस

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
}

उत्पादन

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>


यदि आपके पास कुछ नियमित सामग्री है और न केवल टेक्स्ट की एक पंक्ति है, इसलिए मार्जिन की गणना करने के लिए मुझे केवल संभावित कारण पता है।
यहाँ एक उदाहरण है:

एचटीएमएल

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

सीएसएस

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

तो, #supercontainer आपका "whole page" और इसकी width 1200px
#middlecontainer आपकी साइट की सामग्री के साथ div ; यह width 102px । यदि सामग्री की width ज्ञात है, तो आपको पृष्ठ के आकार को 2 तक विभाजित करने की आवश्यकता है, और सामग्री की width परिणामस्वरूप आधे से प्रतिस्थापित करना होगा:
1200/2 - (102/2) = 54 9;

हां, मैं यह भी देख रहा हूं कि यह डीईआर ग्रॉस सीएसएस की विफलता है।


यह आईई में भी काम करता है, ऑटो मार्जिन नहीं करते हैं।

.centered {
    position:           absolute;
    display:            inline-block;
    left:           -500px;
    width:          1000px;
    margin:             0 50%;
}

सरल http://jsfiddle.net/8pd4qx5r/

html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}

.content {
  margin: 0 auto;
  width: 260px;
  text-align: center;
  background: pink;
}


position: absolute और फिर top:50% और left:50% स्क्रीन के ऊर्ध्वाधर केंद्र पर शीर्ष किनारे रखता है, और क्षैतिज केंद्र पर बायां किनारा रखता है, फिर margin-top को div की ऊंचाई के नकारात्मक में जोड़कर यानी -100 इसे बदल देता है 100 से ऊपर, इसी तरह margin-left । यह पृष्ठ के केंद्र में बिल्कुल div हो जाता है।

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
<div id="outPopUp"></div>  


डिवीजन सामग्री आकार को ठीक किए बिना लंबवत और क्षैतिज माता-पिता के अंदर केंद्रित है

इस उदाहरण को देखें (क्लिक करें) । बहुत सरल, और लचीला ऊंचाई के लिए भी काम करता है। अगर आपके पास निश्चित ऊंचाई के साथ सामग्री नहीं है तो बिल्कुल सही।

और यहां (क्लिक) कुछ अन्य समाधानों के साथ एक अच्छा अवलोकन है।

और मशहूर -50% चाल के साथ लचीली चौड़ाई समाधान के साथ यहां एक और उदाहरण (क्लिक करें)


<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

body, html{
    display:table;
    height:100%;
    width:100%;
}
.container{
    display:table-cell;
    vertical-align:middle;
}
.container .box{
    width:100px;
    height:100px;
    background:red;
    margin:0 auto;

}

http://jsfiddle.net/NPV2E/

"बॉडी" टैग के लिए "चौड़ाई: 100%" यह केवल उदाहरण के लिए है। असली परियोजना में आप इस संपत्ति को हटा सकते हैं।





center