Yatay ve dikey merkez nasıl yapılır?

İşte

kaynak kodu:Yatay ve dikey merkez nasıl yapılır?

<div id = "outer"> 
    <div id="top"> 
    .... 
    </div> 

    <div id="inner"> 
    .... 
    </div> 

    <div id="bottom"> 
    .... 
    </div>  
</div>

Ben div (id iç), yatay & dikey merkez nasıl yapılır öğrenmek istiyorum

? Yatay merkez yapabilirim ama dikey bir merkez yapamam ... Teşekkür ederim.

kaynak

2010-12-01 Tattat

kullanım javaScript veya http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

kaynak

2010-12-01 15:02:14 slobodan

ile bu JavaScript ile yapmanın en kolay ve en güvenilir yolu deneyelim. this blog yayında verilen kodu deneyin. CSS'de yapmaya çalışmak bir kabus, çünkü CSS dikey hizalamayı ele almak için tasarlanmamıştı.

kaynak

2010-12-01 15:05:30 syrion

İç divın boyutlarını biliyorsanız, CSS'yi kullanabilirsiniz.

#outer { 
    position: relative; 
} 

#inner { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    left: 50%; 
    top: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
}

dinamik iç div boyutlarını belirlemek ve yukarıdaki gibi olumsuz kenar ayarlamak için

Diğer seçenekler JavaScript içerir vb display: table-cell ve vertical-align: middle kullanan diğer seçenek vardır.

kaynak

2010-12-01 15:06:09 skajfes

, vertical-align: middle; numaralı telefonu kullanabilmek için Javascript'i kullanın.

kaynak

2011-06-08 14:34:49 ricosrealm

<!doctype html> 
<html> 
<head> 
<title>Centered Image Gallery</title> 
<style type="text/css"> 

/* Use height:100% for top-level containers for fluid height */ 
html, body, .container, .placeholder { height: 100%;} 

/* Set image dimensions and offsets */ 
img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; } 

/* Use text-align:center for content container for fluid horizontal centering */ 
.container { text-align:center; } 

/* Use width of less than 100% for Firefox and Webkit */ 
.wrapper { width: 50%; } 

/* Use vertical-align:middle for fluid vertical centering */ 
.placeholder, .wrapper, .content { vertical-align: middle; } 

/* Use inline-block for wrapper and placeholder so vertical-align works */ 
.placeholder, .wrapper { display: inline-block; } 

/* Use min-width to make the inner container a responsive block element */ 
.fixed { min-width: 1px; } 

/* Use display:inline so text-align works */ 
.content { display:inline; } 

@media, 
{ 
.wrapper { display:inline; } 
} 
</style> 

</head> 
    <body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div class="fixed"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
     </div> 
     </div> 
    </div> 
    <span class="placeholder"></span> 
</div> 

</body> 
</html>

kaynak

2012-06-22 00:41:35

Bu dikey bir şey http://css-tricks.com/centering-in-the-unknown/ ortalamak için ihtiyaçlarımı karşılar. Ie8 + ve modern tarayıcıları destekler

kaynak

2012-08-30 08:49:09 jubalm

Sanırım dikey ve yatay merkezi hizalamak için bir div, tüm tarayıcılarda dinamik yükseklik ve genişliğe sahip.

jSfiddle

HTML

<div class="main"> 
    <div class="contentWrapper"> 
     <div class="content">My Content </br> Goes here</div> 
    </div>   
</div>

CSS

.main { 
    border: 1px solid #f00; 
    height: 400px; 
    width: 400px; 
    position: relative 
} 
.contentWrapper { 
    display: table; 
    width: 100%; 
    height: 100%; 
    *height: auto; 
    *position: absolute; 
    *top: 50%; 
} 
.content { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    *position: relative; 
    *top: -50%; 
}

kaynak

2012-11-22 09:06:19 Tarun

Yatay ve dikey merkez nasıl yapılır?

cevap

İlgili konular