Merkezden merkez ofset numarası

Sayfanın ortasına bir div x miktarı piksel yerleştirmeye çalışıyorum. Bu nedenle div, merkeze göreli olacaktır.Merkezden merkez ofset numarası

Şimdiye kadar, ben

margin:0 auto; 
margin-left:20px;

gibi aptalca bir şey denedim Ama bunun işe yaramaz bilmek bir tarayıcıda test etmek gerekmez.

Yardımlarınız için şimdiden teşekkür ederiz.

kaynak

2011-07-21 Joseph Szymborski

İki DIV'leri, içeride birini kullanarak çalışacaktı bir diğeri. Böyle bir şey:

<div class="outer"> 
    <div class="inner">Hello, world!</div> 
</div> 

.outer { 
    width: 1px; /* Or zero, or something very small */ 
    margin: auto; 
    overflow: visible; 
    background: red; /* A color just for debug */ 
} 
.inner { 
    margin-left: 20px; 
    background: yellow; /* A color just for debug */ 
    width: 100px; /* Depending on the desired effect, width might be needed */ 
}

this example live at jsfiddle bakınız.

dış div

yatay bu soru/cevap gereğince merkezli olacaktır:

How to horizontally center a <div> in another <div>? Sonra iç fark sadece marjı kullanarak, sağa 20 piksel hareket ettirilir.

Not: width'u auto olarak bırakırsanız, genişlik sıfır olacaktır ve istediğiniz gibi olmayabilir.

kaynak

2011-07-21 23:27:57

Teşekkürler bir demet, bu harika çalışıyor. –

teşekkürler +1. Bu farklı ekran çözünürlüklerinde popup bilgi balonu pozisyonları normalize ederken bana gerçek bir sorun kaydedildi. –

Bunun yalnızca içeriği sağa doğru taşımanız gerektiğinde çalışacağını, dolayısıyla sola taşımak istediğinizde işe yaramayacağını unutmayın. Bunu negatif bir sol kenar boşluğu kullanarak düzeltebilirsiniz, ancak bu, kaydırma işlemini bozar. – Vallentin

Sen (marjı ile: otomatik) div ortalamak olabilir ve birlikte sağındaki X piksel (başka div) içeriği taşımak:

margin-right:-20px

Ya da sadece kapsayan div 40 piksel daha uzun yarayan ve hedeflerinize senin Eğer merkeze göre konumlandırmak istediğiniz div elemanın genişliği biliyorsanız sağ

kaynak

2011-07-21 23:12:23 marioBonales

metin, o zaman böyle bir şey yapabileceğini:

http://jsfiddle.net/UnsungHero97/Fg9n6/

HTML

<div id="box">off center</div> 
<div id="box2">center</div>

CSS

#box { 
    width: 300px; 
    height: 100px; 
    border: 1px solid magenta; 
    margin: 0 auto; 
    text-align: center; 
    line-height: 100px; 
    position: relative; 
    left: 20px; 
} 
#box2 { 
    width: 300px; 
    height: 100px; 
    border: 1px solid skyblue; 
    margin: 0 auto; 
    text-align: center; 
    line-height: 100px; 
}

Sonucu

kaynak

2011-07-21 23:27:18 Hristo

Bu doğru çözümdür. Oldukça çok çivilenmişsiniz: basit, zarif ve diğerlerinin aksine, içerik ve sunumun ayrılmasını sağlar. Aferin. –

Bu kabul edilen anwser olmalıdır, en temiz çözüm olan – Sonic750

, @ Sonic750! – Hristo

kullanın bu kod:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #outer { 
       position:relative; 
       width:300px; 
       height:100px; 
       background-color:#000000; 
      } 
      #inner { 
       position:absolute; 
       left:50%; 
       width:100px; 
       height:100px; 
       margin-left:-30px; /*Basic Margin Left-Half of Width=20px-50px=-30px*/ 
       background-color:#ff0000; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="outer"> 
      <div id="inner"></div> 
     </div> 
    </body> 
</html>

Sonuç:
enter image description here

kaynak

2013-05-27 18:31:30

<code> 
<div class="col-xs-12 (or whatever the div is)" style="position:relative;left:20px;text-align:center">Your text here</div> 
</code>

Bu (hatta MediaWiki cehennemde ve) tüm bot, html5 için çalışan hayranlarıyla hiledir "POZİSYON: RELATİF"

Aynı şeyi CSS ile de yapabilirsiniz.

<code> 
.whateva { 
    position:relative; 
    left:20px; 
    text-align:center; 
} 
</code>

kaynak

2016-11-07 02:31:51

cevap

İlgili konular