ﯼﺩﻮﻤﻋ ﻭ ﯽﻘﻓﺍ ﺯﺍﺮﺗ - CSS ﻥﺎﻣﺪﯿﭼ

فهرست مطالب

نمایش فهرست مطالب

▲ ▼

◀ ►

Center elements
horizontally and vertically

ﻂﺳﻭ ﺯﺍﺮﺗ ﺮﺻﺎﻨﻋ

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ margin: auto; ﺯﺍ ،(<div> ﺪﻨﻧﺎﻣ)

ﺪﻨﮐ ﯽﻣ ﯼﺮﯿﮔﻮﻠﺟ ﻮﻠﺟ ﺖﻤﺳ ﻪﺑ ﻥﺁ ﻥﺪﺷ ﻩﺪﯿﺸﮐ ﺯﺍ ﺮﺼﻨﻋ ﺽﺮﻋ ﻢﯿﻈﻨﺗ

ﺪﻨﮐ ﯽﻣ ﻝﺎﻐﺷﺍ ﺍﺭ ﻩﺪﻧﺎﻤﯿﻗﺎﺑ ﯼﺎﻀﻓ ﻭ ﻩﺪﺷ ﺺﺨﺸﻣ ﺽﺮﻋ ﺮﺼﻨﻋ ﺲﭙﺳ

This div element is centered.

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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>

ﻪﺟﻮﺗ: ﯽﮔﮋﯾﻭ ﺮﮔﺍ width ﺩﺭﺍﺪﻧ ﯼﺮﯿﺛﺎﺗ ﻂﺳﻭ

ﺰﮐﺮﻣ ﺭﺩ ﻦﺘﻣ ﻥﺩﺮﮐ ﺯﺍﺮﺗ

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ text-align: center; ﺯﺍ ،ﺪﯿﻫﺩ ﺭﺍ

This text is centered.

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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>

ﻪﺘﮑﻧ: ﻝﺎﺜﻣ ﯼﺍﺮﺑﻞﺼﻓ ﻪﺑ ،ﻦﺘﻣ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﻩﻮﺤﻧ ﺩﺭﻮﻣ ﺭﺩ ﺮﺘﺸﯿﺑ

ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﺰﮐﺮﻣ ﺭﺩ ﺍﺭ ﺮﯾﻮﺼﺗ ﮏﯾ

:ﺪﯿﻨﮐ ﻞﯾﺪﺒﺗ block ﺮﺼﻨﻋ ﻪﺑ ﺍﺭ ﻥﺁ ﻭ ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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>

ﺖﯿﻌﻗﻮﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﺖﺳﺍﺭ ﻭ ﭗﭼ ﺯﺍﺮﺗ

:ﺖﺳﺍ position: absolute; ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺻﺎﻨﻋ ﻥﺩﺮ

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

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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>

ﻪﺟﻮﺗ: ﯽﻣ ﻑﺬﺣ ﯼﺩﺎﻋ ﻥﺎﯾﺮﺟ ﺯﺍ ﻖﻠﻄﻣ ﺮﻘﺘﺴﻣ ﺮﺻﺎﻨﻋﯽﻣ ﻭ ﺪﻧﻮﺷﺪﻨﺷﺎﺑ ﻪﺘﺷ

ﺭﻭﺎﻨﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﺖﺳﺍﺭ ﻭ ﭗﭼ ﺯﺍﺮﺗ

:ﺖﺳﺍ float ﯽﮔﮋﯾﻭ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺻﺎﻨﻋ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﯼ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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>

clearfix ﮏﻫ

ﻪﺟﻮﺗ: ﺪﺷﺎﺑ ﺭﻭﺎﻨﺷ ﻭ ﺪﺷﺎﺑ ﻥﺁ ﯼﻭﺎﺣ ﺮﺼﻨﻋ ﺯﺍ ﺮﺗﺪﻨﻠﺑ ﯼﺮﺼﻨﻋ ﺮﮔﺍ،

Clearfix ﻥﻭﺪﺑ

Clearfix ﺎﺑ

ﺩﻮﺷ ﻊﻓﺭ ﺎﺗ ﻢﯿﻨﮐ ﻪﻓﺎﺿﺍ ﯼﻭﺎﺣ ﺮﺼﻨﻋ ﻪﺑ ﺍﺭ clearfix ﮏﻫ ﻢﯿﻧﺍﻮﺗ ﯽﻣ ﺲﭙﺳ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!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>

ﺪﭘ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﯼﺩﻮﻤﻋ ﺰﮐﺮﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻪﺤﻔﺻ ﻦﯿﯾﺎﭘ ﻭ ﻻﺎﺑ<"code class="w3-codespan> ﺯﺍ ﻪﮐ ﺖﺳﺍ ﻦﯾﺍ



  I am vertically centered.

                                                                          ﻝﺎﺜﻣ
.center {
  padding: 70px 0;
  border: 3px solid 
green;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>


:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ text-align: center ﻭ 

  I am vertically and horizontally centered.

                                                                          ﻝﺎﺜﻣ
.center {
  padding: 70px 0;
  border: 3px solid 
green;
  text-align: center;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>


                                          ﻂﺧ ﻉﺎﻔﺗﺭﺍ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﯼﺩﻮﻤﻋ ﺰﮐﺮﻣ
.ﺖﺳﺍ ﯼﻭﺎﺴﻣ ﺭﺍﺪﻘﻣ ﺎﺑ line-height ﯽﮔﮋﯾﻭ ﺯﺍ ﻩﺩﺎﻔ

  I am vertically and horizontally centered.

                                                                          ﻝﺎﺜﻣ
.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;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>


                                     ﻞﯾﺪﺒﺗ ﻭ ﺖﯿﻌﻗﻮﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﯼﺩﻮﻤﻋ ﺰﮐﺮﻣ
line-height ﻭ ﻥﺩﺮﮐ ﺮﭘ<"code class="w3-


 I am vertically and horizontally centered.

                                                                          ﻝﺎﺜﻣ
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  
position: absolute;
  top: 50%;
  
left: 50%;
  transform: translate(-50%, -50%);
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>


ﻪﺘﮑﻧ: ﯽﮔﮋﯾﻭ ﻩﺭﺎﺑﺭﺩ transform ﺭﺩ Transforms ﺖﺧﻮﻣﺁ ﺪﯿﻫﺍﻮﺧ ﺮﺘﺸﯿﺑ
                                            Flexbox ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﯼﺩﻮﻤﻋ ﺰﮐﺮﻣ
:ﺩﻮﺷ ﯽﻤﻧ ﯽﻧﺎﺒﯿﺘﺸﭘ ﯽﻠﺒﻗ ﯼﺎﻫ ﻪﺨﺴﻧ ﻭ IE10 ﺭﺩ flexbox ﻪﮐ ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﺟﻮﺗ ﻂﻘﻓ .ﺪﯿﻨ

 I am vertically and horizontally centered.

                                                                          ﻝﺎﺜﻣ
 .center {
  display: flex;
  justify-content: center;
  
  align-items: center;
  height: 200px;
  border: 3px solid 
  green; 
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>


ﻪﺘﮑﻧ: ﻞﺼﻓ ﺭﺩ CSS Flexbox ﻩﺭﺎﺑﺭﺩ ﺎﻣ Flexbox ﺩﺮﮐ ﺪﯿﻫﺍﻮﺧ ﺐﺴﮐ ﯼﺮﺘ

  
    
      ← صفحه قبلی
    
    
      صفحه بعد →

ﯼﺩﻮﻤﻋ ﻭ ﯽﻘﻓﺍ ﺯﺍﺮﺗ - CSS ﻥﺎﻣﺪﯿﭼ

فهرست مطالب

Center elementshorizontally and vertically

ﻂﺳﻭ ﺯﺍﺮﺗ ﺮﺻﺎﻨﻋ

ﻝﺎﺜﻣ

ﺰﮐﺮﻣ ﺭﺩ ﻦﺘﻣ ﻥﺩﺮﮐ ﺯﺍﺮﺗ

ﻝﺎﺜﻣ

ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﺰﮐﺮﻣ ﺭﺩ ﺍﺭ ﺮﯾﻮﺼﺗ ﮏﯾ

ﻝﺎﺜﻣ

ﺖﯿﻌﻗﻮﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﺖﺳﺍﺭ ﻭ ﭗﭼ ﺯﺍﺮﺗ

ﻝﺎﺜﻣ

ﺭﻭﺎﻨﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﺖﺳﺍﺭ ﻭ ﭗﭼ ﺯﺍﺮﺗ

ﻝﺎﺜﻣ

clearfix ﮏﻫ

Clearfix ﻥﻭﺪﺑ

Clearfix ﺎﺑ

ﻝﺎﺜﻣ

ﺪﭘ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﯼﺩﻮﻤﻋ ﺰﮐﺮﻣ

ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

ﻂﺧ ﻉﺎﻔﺗﺭﺍ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﯼﺩﻮﻤﻋ ﺰﮐﺮﻣ

ﻝﺎﺜﻣ

ﻞﯾﺪﺒﺗ ﻭ ﺖﯿﻌﻗﻮﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﯼﺩﻮﻤﻋ ﺰﮐﺮﻣ

ﻝﺎﺜﻣ

Flexbox ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ - ﯼﺩﻮﻤﻋ ﺰﮐﺮﻣ

ﻝﺎﺜﻣ

Center elements
horizontally and vertically