nasıl olduğunu bilmek ister misin bir görüntüyü DIV'de ortalamak? Bir görüntüyü DIV'de ortalamak, web sayfanızın görünümünü ve organizasyonunu iyileştirmek ve görüntülemek istediğiniz görüntüyü vurgulamak için yararlı olabilir. Bir görüntüyü DIV'de ortalama zor değilancak bu, görüntü türü, DIV'nin boyutu, DIV'nin stili vb. gibi çeşitli faktörlere bağlıdır.
Bu yazıda açıklayacağız HTML ve CSS kullanarak bir DIV'de bir görüntünün nasıl ortalanacağıWeb sayfalarını oluşturmak ve tasarlamak için kullanılan programlama dilleridir. Size en uygun olanı seçebilmeniz için size çeşitli yöntemler ve örnekler göstereceğiz.
DIV nedir?
Div, aşağıdaki amaçlar için kullanılan bir HTML öğesidir: bir web sayfasında bölümler veya kapsayıcılar oluşturma. Bu, metin, resimler, bağlantılar vb. gibi diğer öğeleri içerebilir. Ayrıca bu bir blok öğesidir, yani sayfanın tüm genişliğini kaplar ve yüksekliğini ve genişliğini tanımlayabilirsiniz. Div genel bir öğedir, yani belirli bir anlamsal anlamı yoktur. Bu nedenle div'e bir isim veya kategori vermek için genellikle class veya id nitelikleriyle birlikte kullanılır. Aynı zamanda sıklıkla kullanılır stil özelliğiyle veya CSS stil sayfalarıyladiv'e bir görünüm veya tasarım vermek için.
Div, bir web sayfasının içeriğini düzenlemek ve yapılandırmak ve buna stil özellikleri uygulamak için kullanılır. Bir div ile diğer öğeleri içeren ve hizalanabilen, ortalanabilen, renklendirilebilen, gölgelendirilebilen vb. bir kutu oluşturabilirsiniz. Format şu amaçlarla da kullanılabilir: sütunlar veya satırlar oluşturİçeriği düzenli ve esnek bir şekilde dağıtmak. Genel olarak animasyonlar, geçişler, dönüşümler vb. gibi görsel veya etkileşimli efektler oluşturmak için de kullanılabilir.
Bir görüntü yatay olarak nasıl ortalanır
Bir görüntüyü DIV'de yatay olarak ortalayın görüntüyü merkeze hizalamak anlamına gelir DIV'nin genişliği. Bunu yapmanın birkaç yolu vardır, ancak en yaygın olanları şunlardır:
- text-align: center özelliğini kullanma. Bu özellik DIV öğesine uygulanır ve DIV içindeki tüm öğelerin yatay olarak ortalanmasına neden olur. Örneğin:
- Marj özelliğini kullanma: auto. Bu özellik IMG öğesine uygulanır ve görüntünün yatay olarak ortalanarak aynı sol ve sağ kenar boşluklarına sahip olmasına neden olur. Bunun çalışması için görüntünün tanımlanmış bir genişliğe sahip olması ve blok türünde olması veya display: blok özelliğine sahip olması gerekir. Örneğin:
- Transform özelliğini kullanma: TranslateX(). Bu özellik IMG öğesine uygulanır ve görüntünün orijinal konumundan belirli bir mesafe kadar yatay olarak hareket etmesine neden olur. Yatay olarak ortalamak için genişliğinin %50'si kadar sağa kaydırmanız gerekir. Bunun çalışması için görüntünün tanımlanmış bir genişliğe sahip olması ve blok türünde olması veya display: blok özelliğine sahip olması gerekir. Örneğin:
Bir görüntü dikey olarak nasıl ortalanır
Bir görüntüyü DIV'de dikey olarak ortalayın görüntüyü DIV yüksekliğinin merkezine hizalamak anlamına gelir. Bunu yapmanın birkaç yolu vardır, ancak en yaygın olanları şunlardır:
- Vertical-align özelliğini kullanma: orta. Bu özellik IMG öğesine uygulanır ve görüntünün metin satır taban çizgisine göre dikey olarak merkeze hizalanmasına neden olur. Bunun çalışması için DIV öğesinin tanımlı bir yüksekliğe sahip olması ve IMG öğesinin inline türünde olması veya display: inline özelliğine sahip olması gerekir. Örneğin:
- Kenar boşluğu üst ve kenar boşluğu alt özelliğini kullanma. Bu özellikler IMG öğesine uygulanır ve görüntünün aynı üst ve alt kenar boşluklarına sahip olmasına ve dikey olarak ortalanmasına neden olur. Çalışması için DIV öğesinin tanımlı bir yüksekliğe sahip olması ve IMG öğesinin tanımlı bir yüksekliğe sahip olması ve blok türünde olması veya display: blok özelliğine sahip olması gerekir. Örneğin:
- Transform özelliğini kullanma: TranslateY(). Bu sefer IMG elemanına uygulanarak görüntünün orijinal konumundan belirli bir mesafe kadar dikey olarak hareket etmesine neden olur. Dikey olarak ortalamak için yüksekliğinin %50'si kadar aşağıya doğru hareket ettirmeniz gerekir. Çalışması için DIV öğesinin tanımlı bir yüksekliğe sahip olması ve IMG öğesinin tanımlı bir yüksekliğe sahip olması ve blok türünde olması veya display: blok özelliğine sahip olması gerekir. Örneğin:
Bir görüntü her iki eksende nasıl ortalanır?
Bir DIV'de bir görüntüyü her iki eksende ortalamak şu anlama gelir: görüntüyü hem genişliğin hem de yüksekliğin ortasına hizalayın DIV'in en karmaşık olanıdır. Bunu yapmanın birkaç yolu vardır, ancak en yaygın olanları şunlardır:
- text-align: center özelliğini ve Vertical-align: middle özelliğini kullanma. Bu özellikler sırasıyla DIV öğesi ve IMG öğesi için geçerlidir ve görüntünün hem yatay hem de dikey olarak merkeze hizalanmasına neden olur. Bunun çalışması için DIV öğesinin tanımlı bir yüksekliğe sahip olması ve IMG öğesinin inline türünde olması veya display: inline özelliğine sahip olması gerekir. Örneğin:
- Marj özelliğini kullanma: auto. Burada IMG öğesine uygulanır ve görüntünün dört tarafta da eşit kenar boşluklarına sahip olmasını sağlayarak görüntüyü her iki eksende ortalar. Çalışması için DIV öğesinin tanımlı bir yüksekliğe sahip olması ve IMG öğesinin tanımlı bir genişliğe ve yüksekliğe sahip olması ve blok türünde olması veya display: blok özelliğine sahip olması gerekir. Örneğin:
- Transform özelliğini kullanma: Translate(). Bu durumda IMG elemanına uygulanır ve görüntünün her iki eksende orijinal konumundan belirli bir mesafe hareket etmesine neden olur. Ortalamak için genişliğinin %50'si sağa ve yüksekliğinin %50'si kadar aşağı taşımanız gerekir. Çalışması için DIV öğesinin tanımlı bir yüksekliğe sahip olması ve IMG öğesinin tanımlı bir genişliğe ve yüksekliğe sahip olması ve blok türünde olması veya display: blok özelliğine sahip olması gerekir. Örneğin:
Herhangi bir resmi ortalayın
Bir görüntüyü DIV'de ortalamak yararlı olabilir web sitenizin görünümünü ve organizasyonunu iyileştirmek içinGörüntülemek istediğiniz görüntüyü vurgulamak için ve Bir görüntüyü bir DIV'de ortalamak zor değildir ancak bu, görüntünün türü, DIV'nin boyutu, DIV'nin stili vb. gibi çeşitli faktörlere bağlıdır.
Bu yazıda HTML ve CSS kullanarak bir DIV'de bir görüntünün nasıl ortalanacağını açıkladıkWeb sayfalarını oluşturmak ve tasarlamak için kullanılan programlama dilleridir. Aralarından seçim yapabileceğiniz çeşitli yöntemler ve örnekler gösterdik. size en uygun olanı.
Umarız bu makaleyi beğenmişsinizdir ve bir görüntünün DIV'de nasıl ortalanacağını öğrenmişsinizdir. Herhangi bir sorunuz veya öneriniz varsa bize yorum bırakın. Bu makaleyi ayrıca beğenen arkadaşlarınızla veya ailenizle de paylaşabilirsiniz. HTML veya CSS. Hadi işe koyulalım ve programlayalım!