css - tag - html ট্যাগ লিস্ট




কিভাবে ডিভিতে একেবারে অবস্থান উপাদান কেন্দ্র? (18)

আমি আমার উইন্ডো কেন্দ্রে একটি div ( position:absolute; ) উপাদান স্থাপন করতে হবে। কিন্তু আমার সমস্যা হচ্ছে, কারণ প্রস্থ অজানা

আমি এই চেষ্টা। কিন্তু প্রস্থ প্রতিক্রিয়াশীল হিসাবে এটি সামঞ্জস্য করা প্রয়োজন।

.center {
  left: 50%;
  bottom:5px;
}

কোন ধারনা?


প্রতিক্রিয়াশীল সমাধান

যদি আপনি IE8 এবং নিম্ন সমর্থন করার প্রয়োজন হয় না তবে এখানে প্রতিক্রিয়াশীল নকশা বা অজানা মাত্রার জন্য একটি ভাল সমাধান

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}
<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

এখানে একটি জেএস ফিডেল

সূত্র হল, যে left: 50% পিতামাতার আপেক্ষিক, যখন translate রূপান্তর উপাদান প্রস্থ / উচ্চতা আপেক্ষিক।

এইভাবে আপনি একটি পুরোপুরি কেন্দ্রিক উপাদান আছে, উভয় সন্তানের এবং পিতা বা মাতা উভয় একটি নমনীয় প্রস্থ সঙ্গে। বোনাস: এটি যদি পিতামাতার চেয়ে বড় হয় তবেও এটি কাজ করে।

আপনি এটির সাথে উল্লম্বভাবে কেন্দ্র করতে পারেন (এবং আবার, পিতামাতার প্রস্থ এবং উচ্চতা এবং শিশু সম্পূর্ণরূপে নমনীয় (এবং / অথবা অজানা) হতে পারে:)

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

আপনি ভাল prefixed বিক্রেতা transform প্রয়োজন হতে পারে মনে রাখবেন। উদাহরণস্বরূপ - -webkit-transform: translate(-50%,-50%);


অনুভূমিকভাবে অজানা প্রস্থ একটি ব্লক কেন্দ্রে আমার জন্য কাজ করা একটি সহজ পদ্ধতি:

<div id="wrapper">
  <div id="block"></div>
</div>
#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

একটি ব্লক-অ্যালাইন সম্পত্তি ব্লকটির সারিবদ্ধভাবে আলাদাভাবে তার সামগ্রীটি সংলগ্ন করতে # ব্লক রুলেটটিতে যোগ করা যেতে পারে।

এটি ফায়ারফক্স, ক্রোম, IE, এজ এবং সাফারি সাম্প্রতিক সংস্করণে কাজ করেছে।


আপনি একটি ডিভিতে ছবিটি রাখতে এবং একটি ডিভ আইডি যুক্ত করতে পারেন এবং সেই ডিভিটির জন্য CSS থাকতে পারে একটি text-align:center

এইচটিএমএল:

<div id="intro_img">

    <img src="???" alt="???">

</div>

সিএসএস:

#intro_img {
    text-align:center;
}

আমার পছন্দের কেন্দ্রীকরণ পদ্ধতি:

position: absolute;
margin: auto;
width: x%
  • পরম ব্লক উপাদান পজিশনিং
  • মার্জিন অটো
  • একই বাম / ডান, শীর্ষ / নীচে

here JSFiddle


আমি এই প্রশ্নের উত্তর ইতিমধ্যে কয়েক উত্তর আছে বুঝতে, কিন্তু আমি একটি সমাধান খুঁজে পাওয়া যায় নি যে প্রায় সব ক্লাসে কাজ করবে যে জ্ঞান করে এবং মার্জিত, তাই এখানে একটি গুচ্ছ tweaking পরে আমার গ্রহণ করা হয়:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}
<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

top: 50% এবং একটি left: 50% , তারপর X / Y অক্ষ উভয় ক্ষেত্রে স্থানান্তর (স্থান তৈরি করুন) -50% একটি রূপান্তর করুন "একটি আয়না স্থান তৈরি করুন" বলার অপেক্ষা রাখে না এটি কি করে।

যেমন, এটি একটি div এর 4 টি পয়েন্টে সমান স্থান তৈরি করে, যা সবসময় একটি বাক্স (4 টি দিক রয়েছে)।

এটা হবে:

  1. পিতামাতার উচ্চতা / প্রস্থ সম্পর্কে জানার ছাড়া কাজ।
  2. প্রতিক্রিয়াশীল কাজ।
  3. এক্স বা Y অক্ষের উপর কাজ করে। অথবা উভয়, আমার উদাহরণ হিসাবে।
  4. আমি এমন পরিস্থিতি নিয়ে আসতে পারি না যেখানে এটি কাজ করে না।

আমি একই সমাধান ব্যবহার করেছেন:

#styleName {
    position: absolute;
    margin-left: -"X"px;
}

যেখানে "এক্স" একটি DIV প্রস্থের অর্ধেক, আমি প্রদর্শন করতে চাই। সব ব্রাউজারে আমার জন্য জরিমানা কাজ করে।


উপরে প্রতিক্রিয়াশীল সমাধান sass / কম্পাস সংস্করণ:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

উপাদানটি width এবং height থাকলে এই সমাধানটি কাজ করে

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
<div class="wrapper">
  <div class="content"></div>
</div>


এই প্রশ্নের সমাধান আমার ক্ষেত্রে কাজ করেনি .. আমি কিছু ছবির জন্য একটি ক্যাপশন করছি এবং আমি এটি ব্যবহার করে সমাধান করেছি

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}
<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>


এইচটিএমএল

<div id='parent'>
  <div id='centered-child'></div>
</div>

সিএসএস

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/


এটা আমার জন্য কাজ করেছে:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

এটি আমার জন্য কাজ করে:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>


এটি করার জন্য একটি দরকারী jQuery প্লাগইন heres। here পাওয়া here । আমি এটা সিএসএস সঙ্গে সম্পূর্ণরূপে সম্ভব মনে হয় না

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

যতদূর আমি জানি, অজানা প্রস্থের জন্য এটি অসম্ভব।

আপনি করতে পারেন - যদি এটি আপনার দৃশ্যকল্পতে কাজ করে - 100% প্রস্থ এবং উচ্চতা সহ একটি অদৃশ্য উপাদানটি একেবারেই অবস্থান করে এবং মার্জিন ব্যবহার করে সেখানে উপাদানটি কেন্দ্রীভূত থাকে: স্বয়ংক্রিয় এবং সম্ভবত উল্লম্ব-সারিবদ্ধ। অন্যথায়, আপনি যে করতে জাভাস্ক্রিপ্ট প্রয়োজন হবে।


সমাধানটির সন্ধানের জন্য আমি উপরের উত্তর পেয়েছি এবং ম্যাটিয়াস উইলারের উত্তর দিয়ে বিষয়বস্তুকে কেন্দ্র করে কিন্তু টেক্সট-অ্যালাইন ব্যবহার করে।

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

ক্রোম এবং ফায়ারফক্স সঙ্গে কাজ করে।


সিএসএসের অন্ধকার দিকটি ব্যবহার করার চেষ্টা করবেন না। মার্জিনের জন্য নেতিবাচক মান ব্যবহার করে এড়িয়ে চলুন। আমি জানি যে কখনও কখনও আপনি margin-left: -450px মত ভয়ানক জিনিস করতে বাধ্য হয় margin-left: -450px , কিন্তু সম্ভবত আপনি right: 450px মত কিছু করতে পারে margin-left: -450px । এটা শুধু কাজ করার আমার উপায়।


#content { margin:0 auto; display:table; float:none;}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>


<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>





absolute