HTML5'te tuval nasıl ortalanır

105

Bir süredir çözüm arıyordum ama hiçbir şey bulamadım. Belki sadece arama terimlerimdir. Ben de tuval merkezini tarayıcı penceresinin boyutuna göre yapmaya çalışıyorum. Tuval 800x600 boyutundadır. Pencere 800x600'ün altına düşerse, yeniden boyutlandırılmalıdır (ancak şu anda bu çok önemli değil)

— Jorgen
kaynak

Boyut vermeden ve yeniden boyutlandırırken kaydırma çubukları olmadan tam sayfa bir tuval oluşturmasını nasıl söyleyebilirim?

— jorgen

2

HTML'de yapmayın .. bunu javascript ile yapın, appendChild veya başka bir şey gibi şeyler kullanın ve genişliği ve yüksekliği window.innerWidth ve window.innerHeight olarak ayarlayın

— JinX

173

Tuvale aşağıdaki css stili özelliklerini verin:

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

Düzenle

Bu cevap oldukça popüler olduğu için biraz daha detay ekleyeyim.

Yukarıdaki özellikler yatay olarak , tuvali, div'i veya ebeveynine göre sahip olduğunuz diğer düğümü ortalayacaktır. Üst veya alt kenar boşluklarını ve dolguları değiştirmeye gerek yoktur. Bir genişlik belirlersiniz ve tarayıcının kalan alanı otomatik kenar boşluklarıyla doldurmasına izin verirsiniz.

Bununla birlikte, daha az yazmak istiyorsanız, istediğiniz css kısaltma özelliklerini kullanabilirsiniz, örneğin

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

Ancak tuvali dikey olarak ortalamak farklı bir yaklaşım gerektirir. Mutlak konumlandırma kullanmanız ve hem genişliği hem de yüksekliği belirtmeniz gerekir. Ardından sol, sağ, üst ve alt özellikleri 0 olarak ayarlayın ve tarayıcının kalan alanı otomatik kenar boşluklarıyla doldurmasına izin verin.

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Tuval, veya olarak positionayarlanmış ilk ana öğeye göre kendini ortalayacaktır.relativeabsolute hiçbiri bulunursa veya vücudun.

Başka bir yaklaşım display: flex, IE11'de mevcut olan kullanmak olacaktır.

Ayrıca, xhtml veya html 5 gibi yeni bir doctype kullandığınızdan emin olun.

— Marco Luglio
kaynak

8

Ekran bloğu; ve kenar boşluğu: 0 otomatik 0 otomatik; aynı zamanda yeterlidir. Teşekkürler!

— Chris

Bir tuvali dikey olarak ortalamak için, HTML'de belirttiğiniz sürece genişliği ve yüksekliği girmenize gerek yoktur. Her neyse, kromda.

— Zac

1

Genişlik ve yükseklik css veya html olarak belirtilebilir. Ancak tüm sunum mantığının oraya gitmesi gerektiğinden css önerilen yoldur.

— Marco Luglio

1

Tuvali merkezliyor ama tuvale çizilmiş resim varsa geriliyor. Görüntüyü

— uzatmadan

Tuval öğesindeki satır içi stillerde yükseklik ve genişliğin ayarlanması, çizdiğim resimlerimin boyutlarını vb. Karıştırdı. Birini hayal kırıklığından kurtaracağını umduğum bir uyarı.

— MrBoJangles

52

Kanvasınıza ff CSS özelliklerini verebilirsiniz:

#myCanvas
{
    display: block;
    margin: 0 auto;
}

— jinmichaelr
kaynak

Bir jsfiddle sağlayabilir misiniz? Bu yaklaşım işe yaramıyor gibi görünüyor

— jose.angel.jimenez

3

Bu, yatay merkezleme için işe yarar, ancak dikey merkezleme için geçerli değildir.

— Matty J

20

Div'i HTML'de ortalamanız yeterlidir:

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

Sadece yüksekliği ve genişliği ne olursa olsun değiştirin ve ortalanmış bir div'iniz var

http://jsfiddle.net/BVghc/2/

— JoeCianflone
kaynak

Şanslıyım, bunu gönderdikten kısa süre sonra buna ihtiyacım vardı. :)

— mcandre

5

Tuval kaptan daha küçükse bu işe yaramaz.

— SystemicPlural

8

Kanvas elemanını yatay olarak ortalamak için, bunu bir blok seviyesi olarak belirtmeli ve sol ve sağ kenar boşluğu özelliklerini tarayıcıya bırakmalısınız:

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

Dikey olarak ortalamak isterseniz, tuval öğesinin kesinlikle konumlandırılması gerekir:

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

Yatay ve dikey olarak ortalamak isterseniz şunları yapın:

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

Daha fazla bilgi için şu adresi ziyaret edin: https://www.w3.org/Style/Examples/007/center.en.html

— Konkret
kaynak

5

Yukarıdaki cevaplar yalnızca tuvaliniz kap ile aynı genişlikte ise işe yarar.

Bu ne olursa olsun çalışır:

#container {
  width: 100px;
  height:100px;
  border: 1px solid red;
  
  
  margin: 0px auto;
  text-align: center;
}

#canvas {
  border: 1px solid blue;
  width: 50px;
  height: 100px;
  
}

<div id="container">
  <canvas id="canvas" width="100" height="100"></canvas>
</div>

Snippet'i genişlet

— SistemikPlural
kaynak

3

Bu kodu kullanın:

<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>

<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

</body>
</html>

— Keyur Patel
kaynak

2

Sadece yükseklik bilgisiyle yüklediğim birçok farklı genişlikte resimlerim olduğu için aynı sorunu yaşadım. Genişlik ayarlamak, tarayıcının resmi uzatmasına ve sıkıştırmasına olanak tanır. Problemi, image_tag satırının hemen önündeki metin satırını ortalayarak (ayrıca float: left; 'den kurtularak) çözüyorum. Metnin sola hizalanmasını isterdim, ancak bu, tahammül edebileceğim küçük bir rahatsızlıktır.

— MDM
kaynak

0

Ekle text-align: center;için ana etiketi arasında<canvas> . Bu kadar.

Misal:

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>

— Raj Yadav
kaynak

bu basit, sonra css kullanmak

— Clifton Avil D'Souza