Bir div içindeki içerikleri hizalama

152

HTML'de bir kap içindeki içeriği hizalamak için css stili metin hizalama kullanıyorum. İçerik metin veya tarayıcı IE olduğunda bu iyi çalışır. Ancak aksi halde çalışmaz.

Ayrıca adından da anlaşılacağı gibi, temel olarak metni hizalamak için kullanılır. Align özelliği uzun bir süre önce kullanımdan kaldırılmıştır.

Html içindeki içerikleri hizalamanın başka bir yolu var mı?

html css text-align

— Hemanshu Bhojak
kaynak

Bize daha fazla bilgi verin lütfen? diğer tarayıcılarda çalışmayan kodu geçmiş.

— Shoban

İnsanların ne yapmaya çalıştığınızı bilmesi için işaretlemenize bir örnek vermelisiniz. Aksi takdirde, sorunuz belirsiz.

— Levik

216

metin hizalama metni ve diğer satır içi içeriği hizalar. Blok elemanı alt öğelerini hizalamaz.

Bunu yapmak için, istediğiniz öğeye 'otomatik' sol ve sağ kenar boşluklarıyla genişlik vermek istersiniz. IE5.x dışında her yerde çalışan standartlara uygun yoldur.

<div style="width: 50%; margin: 0 auto;">Hello</div>

Bunun IE6'da çalışması için, uygun bir DOCTYPE kullanarak Standartlar Modunun açık olduğundan emin olmanız gerekir .

Bu günlerde gerçekten yapmamanız gereken IE5 / Quirks Modunu gerçekten desteklemeniz gerekiyorsa, merkezlemeye iki farklı yaklaşımı birleştirmek mümkündür:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Açıkçası, stiller en iyi bir stil sayfasına yerleştirilir, ancak satır içi sürüm açıklayıcıdır.)

— bobince
kaynak

2

Div genişliğini bilmiyorsanız, genellikle durum budur, bu çözüm tüm tarayıcılarda mükemmel çalışır: matthewjamestaylor.com/blog/…

— Artem

<Div style = "width: 100%; margin: 0 auto;"> Merhaba </div>

— Aamol

9

Bunu şu şekilde de yapabilirsiniz:

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

Artem Russakovskii'nin de belirttiği gibi , tam açıklama için Mattew James Taylor'ın orijinal makalesini okuyun .

— Mehdi
kaynak

9

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

— krithi k
kaynak

1

Bu kod snippet'i soruyu çözebilir, ancak bir açıklama da dahil olmak üzere , yayınınızın kalitesini artırmaya yardımcı olur. Gelecekte okuyucular için soruyu cevapladığınızı ve bu kişilerin kod önerinizin nedenlerini bilmeyebileceğini unutmayın.

— andreas

Üzgünüz, yukarıdaki kod bir div merkezini ana içerikle hizalayacaktır

— krithi k

6

Dürüst olmak gerekirse, şimdiye kadar gördüğüm tüm çözümlerden nefret ediyorum ve size nedenini söyleyeceğim: Sadece doğru hizalamıyor gibi görünüyorlar ... bu yüzden genellikle yaptığım şey:

Her div ve kendi marjlarının hangi piksel değerlerini tuttuğunu biliyorum ... bu yüzden aşağıdakileri yapıyorum.

Mutlak bir konuma ve% 50 sol değere sahip bir sarıcı div oluşturacağım ... bu div şimdi ekranın ortasında başlıyor ve sonra div genişliğinin tüm içeriğinin yarısını çıkarıyorum ... ve GÜZELLİKLE içeriği ölçeklendiriyorum ... ve bunun tüm tarayıcılarda da işe yaradığını düşünüyorum. Kendiniz deneyin (bu örnek, sitenizdeki tüm içeriğin bu sarmalayıcı sınıfını kullanan bir div etiketine sarıldığını ve içindeki tüm içeriğin genişliğinin 200 piksel olduğunu varsayar):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

EDIT: eklemeyi unuttum ... ayrıca genişliği ayarlamak isteyebilirsiniz: 0px; bazı tarayıcılarda kaydırma çubuklarını göstermemesi için bu sarıcı bölmesinde ve ardından tüm iç div'ler için mutlak konumlandırma kullanabilirsiniz.

Bu aynı zamanda üst% 50 ve kenar boşluğu kullanarak içeriğinizi dikey olarak hizalamak için İNANILMAZ çalışır. Şerefe!

— Alexandru
kaynak

2

İşte iyi çalışmış bir teknik kullanıyorum:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

Snippet'i genişlet

— tazı
kaynak

2

Aşağıda benim için her zaman işe yarayan yöntemler

Esnek yerleşim modeli kullanarak :

Üst div ekranını olarak ayarlayın ve div display: flex;içindeki alt öğeleri justify-content: center;(ana eksendeki öğeleri hizalamak için) ve align-items: center;(öğeleri çapraz eksendeki hizalamak için ) kullanarak hizalayabilirsiniz.

Birden fazla alt öğeniz varsa ve bunların düzenlenme şeklini (sütun / satırlar) kontrol etmek istiyorsanız, flex-directionözellik de ekleyebilirsiniz .

Çalışma örneği:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Snippet'i genişlet

2. (eski yöntem) Konum, kenar boşluğu özellikleri ve sabit boyut kullanma

Çalışma örneği:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Snippet'i genişlet

— nmak18
kaynak

1

Tüm cevaplar yatay hizalama hakkında konuşur.

Birden çok içerik öğesini dikey olarak hizalamak için bu yaklaşıma bir göz atın:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

Snippet'i genişlet

— Nicolas
kaynak

-2

HTML ve CSS kullanan başka bir örnek:

<div style="width: Auto; margin: 0 auto;">Hello</div>

— Diogo
kaynak

27

Yazdıklarınızın hiçbiri ASP.NET'e özgü değildir. Sadece HTML ve satır içi CSS'dir. Özellikleri olan bir sunucu denetimi yazmak mı istediniz?

— webworm

1

Sabit. Cevap şimdi doğru teknolojilerden bahsediyor.

— jony