CSS Düzeni - Yatay ve Dikey Hizalama

İçindekiler

İçindekiler tablosunu göster

▲ ▼

◀ ►

Center elements
horizontally and vertically

Elemanları Ortaya Hizala

Bir blok öğesini yatay olarak ortalamak için (<div> gibi), margin: auto; komutunu kullanın.

Elemanın genişliğinin ayarlanması, elemanın dışa doğru uzamasını önleyecektir. kabının kenarları.

Öğe daha sonra belirtilen genişliği ve kalan alanı kaplayacaktır. iki kenar boşluğu arasında eşit olarak bölünecektir:

This div element is centered.

Örnek

.center
{
  margin: auto;
   
width: 50%;
   
border: 3px solid green;
  padding: 10px;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p>Hello World!</p>
</div>

</body>
</html>

Not: width özelliği ayarlanmamışsa ortaya hizalamanın hiçbir etkisi olmaz (veya %100'e ayarlayın).

Metni Ortaya Hizala

Metni bir öğenin içinde ortalamak için text-align: center; komutunu kullanın.

This text is centered.

Örnek

.center {
  text-align: center;
  
border: 3px solid green;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Text</h2>

<div class="center">
  <p>This text is centered.</p>
</div>

</body>
</html>

İpucu: Metnin nasıl hizalanacağına ilişkin daha fazla örnek için CSS Metni bölümüne bakın.

Bir Görüntüyü Ortala

Bir görüntüyü ortalamak için sol ve sağ kenar boşluğunu auto olarak ayarlayın ve bunu bir block öğesine dönüştürün:

Örnek

img
{
  display: block;
    margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>

<img src="paris.jpg" alt="Paris" style="width:40%">

</body>
</html>

Sola ve Sağa Hizala - Konumu kullanma

Öğeleri hizalamanın bir yöntemi position: Absolute; kullanmaktır:

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

Örnek

.right
{
  position: absolute;
   
right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right align with the position property</h2>

<p>An example of how to right align elements with the position property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

Not: Mutlak konumlandırılmış öğeler normal akıştan çıkarılır ve öğelerle çakışabilir.

Sola ve Sağa Hizalama - Kayan noktayı kullanma

Öğeleri hizalamanın başka bir yöntemi de float özelliğini kullanmaktır:

Örnek

.right
{
  float: right;
   
width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right align with the float property</h2>

<p>An example of how to right align elements with the float property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

Düzeltme Hack'i

Not: Bir öğe onu içeren öğeden daha uzunsa ve yüzüyorsa, bulunduğu kabın dışına taşacaktır. Bunu düzeltmek için "clearfix hack"i kullanabilirsiniz (aşağıdaki örneğe bakın).

Clearfix olmadan

Clearfix ile

Daha sonra düzeltmek için düzeltme hackini içeren öğeye ekleyebiliriz. bu sorun:

Örnek

 .clearfix::after {
  content: "";
  clear: both;
  
  display: table;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

Dikey Olarak Ortala - Dolgu kullanma

CSS'de bir öğeyi dikey olarak ortalamanın birçok yolu vardır. Basit bir çözüm, üst ve alt doldurmayı kullanmaktır:

I am vertically centered.

Örnek

.center {
  padding: 70px 0;
  border: 3px solid 
green;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center vertically with padding</h2>

<p>In this example, we use the padding property to center the div element vertically:</p>

<div class="center">
  <p>I am vertically centered.</p>
</div>

</body>
</html>

Hem dikey hem de yatay olarak ortalamak için padding ve text-align: center'ı kullanın:

I am vertically and horizontally centered.

Örnek

.center {
  padding: 70px 0;
  border: 3px solid 
green;
  text-align: center;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>

<h2>Center with padding and text-align</h2>

<p>In this example, we use padding and text-align to center the div element both vertically and horizontally:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Dikey Olarak Ortala - Satır yüksekliğini kullanma

Başka bir püf noktası da line-height özelliğini eşit bir değerle kullanmaktır. height özelliğine:

I am vertically and horizontally centered.

Örnek

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* If the text has multiple lines, add the 
following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>Center with line-height</h2>

<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Dikey Olarak Ortala - Konumu ve dönüşümü kullanma

doldurma ve satır yüksekliği ise seçenek değildir, başka bir çözüm de konumlandırmayı ve transform özelliğini kullanmaktır:

I am vertically and horizontally centered.

Örnek

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  
position: absolute;
  top: 50%;
  
left: 50%;
  transform: translate(-50%, -50%);
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Center with position and transform</h2>

<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

İpucu: 2B Dönüşümlerimizde dönüşüm özelliği hakkında daha fazla bilgi edineceksiniz Bölüm.

Dikey Olarak Ortala - Flexbox'ı Kullanma

Bir şeyleri ortalamak için flexbox'ı da kullanabilirsiniz. Flexbox'ın IE10 ve önceki sürümlerde desteklenmediğini unutmayın:

I am vertically and horizontally centered.

Örnek

 .center {
  display: flex;
  justify-content: center;
  
  align-items: center;
  height: 200px;
  border: 3px solid 
  green; 
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}
</style>
</head>
<body>

<h2>Flexbox Centering</h2>

<p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

İpucu: CSS Flexbox Bölümümüzde Flexbox hakkında daha fazla bilgi edineceksiniz.

CSS Düzeni - Yatay ve Dikey Hizalama

İçindekiler

Center elementshorizontally and vertically

Elemanları Ortaya Hizala

Örnek

Metni Ortaya Hizala

Örnek

Bir Görüntüyü Ortala

Örnek

Sola ve Sağa Hizala - Konumu kullanma

Örnek

Sola ve Sağa Hizalama - Kayan noktayı kullanma

Örnek

Düzeltme Hack'i

Clearfix olmadan

Clearfix ile

Örnek

Dikey Olarak Ortala - Dolgu kullanma

Örnek

Örnek

Dikey Olarak Ortala - Satır yüksekliğini kullanma

Örnek

Dikey Olarak Ortala - Konumu ve dönüşümü kullanma

Örnek

Dikey Olarak Ortala - Flexbox'ı Kullanma

Örnek

Center elements
horizontally and vertically