كيفية توسيط عنصر anchor في css

نور الهدى الأبراهيم · 23 يونيو

كيف اقدر اخلي الرابط بوسط الصفحة

علما جربت text_align center داخل ال link و ال visited و ال hover و ال active و لم يصبح في وسط الصفحة

عمر قره محمد · 23 يونيو

هل يمكنك مشاركة الكود الخاص بك حتى استطيع مساعدتك بشكل افضل ؟

Adnane Kadri · 23 يونيو

تأكد من أن حاوية الرابط تمتلك عرضا كاملا مساويا لعرض الشاشة، ثم أعطها الخاصية:

.link-container{
   text-align:center;
}

في حالة ما كانت هاته الحاوية مرنة (يتم تطبيق display: flex عليها) تأكد من توسيط العناصر في الحاوية المرنة باستخدام:

.link-container{
    justify-content: center;
}

في هاته الحالة، يمكنك أيضا اعطاء العنصر خاصية margin auto على المحور الأفقي:

a{
    margin: 1px auto;
}

Mustafa Suleiman · 23 يونيو

هناك طرق مختلفة، ومنها أن يكون العنصر الأب (الذي يحتوي على الرابط) يستخدم text-align: center كالتالي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="#">هذا رابط</a>
    </div>
</body>
</html>

وفي حال تريد توسيط الرابط بشكل عمودي وأفقي معًا استخدم Flexbox كالتالي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <a href="#">هذا رابط</a>
</body>
</html>

وستجد أمثلة أخرى هنا:

نور الهدى الأبراهيم · 23 يونيو

بتاريخ منذ ساعة مضت قال عمر قره محمد:

هل يمكنك مشاركة الكود الخاص بك حتى استطيع مساعدتك بشكل افضل ؟

كود css ولا html

بتاريخ منذ ساعة مضت قال Mustafa Suleiman:

هناك طرق مختلفة، ومنها أن يكون العنصر الأب (الذي يحتوي على الرابط) يستخدم text-align: center كالتالي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="#">هذا رابط</a>
    </div>
</body>
</html>

وفي حال تريد توسيط الرابط بشكل عمودي وأفقي معًا استخدم Flexbox كالتالي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <a href="#">هذا رابط</a>
</body>
</html>

وستجد أمثلة أخرى هنا:

صحيح عندي عناصر ثانية تستعمل ال text align center

هذا كود ال html

<h1>The Start</h1>

<p>

The Dark Future

</p>

Go To Youtube

</a>

</div>

و هذا كود ال css

h1{

color: purple;

text-decoration: underline;

text-align: center;

text-transform:uppercase ;

direction: ltr;

}

.content{

background-color: cyan;

height: 1330px;

width: 1330px;

}

p{

color: black;

text-align: center;

text-transform:uppercase ;

direction: ltr;

font-weight: bold;

}

a:link{

color: orangered;

text-decoration: underline;

text-align: center;

}

a:visited{

color: purple;

text-decoration: underline;

text-align: center;

}

a:hover{

color: palegoldenrod;

text-decoration: underline;

text-align: center;

}

a:active{

color: coral;

text-align: center;

}

كل شيء تمام لكن فقط ال link لا ياتي الى وسط الصفحة

Khaled Osama3 · 23 يونيو

بتاريخ 30 دقائق مضت قال محمد ال شكر:

كود css ولا html

صحيح عندي عناصر ثانية تستعمل ال text align center

هذا كود ال html

<div class="content">

<h1>The Start</h1>

<p>

The Dark Future

</p>

<a href="https://www.youtube.com/">

Go To Youtube

</a>

</div>

و هذا كود ال css

h1{

color: purple;

text-decoration: underline;

text-align: center;

text-transform:uppercase ;

direction: ltr;

}

.content{

background-color: cyan;

height: 1330px;

width: 1330px;

}

p{

color: black;

text-align: center;

text-transform:uppercase ;

direction: ltr;

font-weight: bold;

}

a:link{

color: orangered;

text-decoration: underline;

text-align: center;

}

a:visited{

color: purple;

text-decoration: underline;

text-align: center;

}

a:hover{

color: palegoldenrod;

text-decoration: underline;

text-align: center;

}

a:active{

color: coral;

text-align: center;

}

كل شيء تمام لكن فقط ال link لا ياتي الى وسط الصفحة

يجب استخدام خاصية display لتغيير طريقة عرض العنصر a وتطبيق التوسيط باستخدام خصائص Flexbox على الحاوية التي تحتوي عليه. قم بتعديل الكود الخاص بك كالتالي:

1. أضف خصائص Flexbox إلى الحاوية (div.content) لجعل جميع العناصر بداخلها تتمركز.
2. استخدم خصائص Flexbox داخل الحاوية لتوسيط الرابط.

إليك الكود المعدل:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Delightful Bakery</title>
  <style>
    h1 {
      color: purple;
      text-decoration: underline;
      text-align: center;
      text-transform: uppercase;
      direction: ltr;
    }

    .content {
      background-color: cyan;
      height: 1330px;
      width: 1330px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    p {
      color: black;
      text-align: center;
      text-transform: uppercase;
      direction: ltr;
      font-weight: bold;
    }

    a:link {
      color: orangered;
      text-decoration: underline;
    }

    a:visited {
      color: purple;
      text-decoration: underline;
    }

    a:hover {
      color: palegoldenrod;
      text-decoration: underline;
    }

    a:active {
      color: coral;
    }
  </style>
</head>

<body>
  <div class="content">
    <h1>The Start</h1>
    <p>The Dark Future</p>
    <a href="https://www.youtube.com/">Go To Youtube</a>
  </div>
</body>

</html>

في هذا الكود، استخدمنا خصائص Flexbox على الحاوية .content بحيث يتم توسيط جميع العناصر بداخلها عموديا وأفقيا. هذا سيجعل الرابط يتمركز في وسط الصفحة بشكل صحيح.

نور الهدى الأبراهيم · 23 يونيو

بتاريخ 7 دقائق مضت قال Khaled Osama3:

يجب استخدام خاصية display لتغيير طريقة عرض العنصر a وتطبيق التوسيط باستخدام خصائص Flexbox على الحاوية التي تحتوي عليه. قم بتعديل الكود الخاص بك كالتالي:

1. أضف خصائص Flexbox إلى الحاوية (div.content) لجعل جميع العناصر بداخلها تتمركز.
2. استخدم خصائص Flexbox داخل الحاوية لتوسيط الرابط.

إليك الكود المعدل:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Delightful Bakery</title>
  <style>
    h1 {
      color: purple;
      text-decoration: underline;
      text-align: center;
      text-transform: uppercase;
      direction: ltr;
    }

    .content {
      background-color: cyan;
      height: 1330px;
      width: 1330px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    p {
      color: black;
      text-align: center;
      text-transform: uppercase;
      direction: ltr;
      font-weight: bold;
    }

    a:link {
      color: orangered;
      text-decoration: underline;
    }

    a:visited {
      color: purple;
      text-decoration: underline;
    }

    a:hover {
      color: palegoldenrod;
      text-decoration: underline;
    }

    a:active {
      color: coral;
    }
  </style>
</head>

<body>
  <div class="content">
    <h1>The Start</h1>
    <p>The Dark Future</p>
    <a href="https://www.youtube.com/">Go To Youtube</a>
  </div>
</body>

</html>

في هذا الكود، استخدمنا خصائص Flexbox على الحاوية .content بحيث يتم توسيط جميع العناصر بداخلها عموديا وأفقيا. هذا سيجعل الرابط يتمركز في وسط الصفحة بشكل صحيح.

شكرا جزيلا لك لقد نجح معي هذا الشيء

محمد عبد العزيز3 · 4 يوليو

# يُمكن توسيط العنصر في الصفحه بإستخدام عدة طرق مختلفه وأشهرها كالاتي:

أولاً: إعطاء العنصر الذي تريد توسيطه position: absolute مع top: 50% و left: 50% ثم transform: translate(-50%, -50%) وبالتالي سيتم توسيط العنصر أفقياً ورأسياً في منتصف الصفحه تماما, كما يُمكن توسيط العنصر رأسياً فقط بجعل top: 0% و left: 50% ثم transform: translate(-50%, 0) , وأيضاً يُمكن توسيطه أفقياً فقط بجعل left: 0% و top: 50% ثم transform: translate(0, -50%)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CENTER</title>
  <style>
    a {
      border: 5px solid;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px;
    }
  </style>
</head>

<body>

    <a href="#">LINK</a>

</body>

</html>

ثانياً: بإستخدام ال flexbox وذلك بإعطاء الأب الخاص بالعنصر الذي تُريد توسيطه وفي حالتنا الأب هو body, html الخواص display: flex و align-items: center لتوسيط الأبناء رأسياً و justify-content: center لتوسيط الأبناء أفقياً ويُعد flexbox من أهم وأشهر الطُرق لتخطيط الصفحه بطريقه سليمه وتحديد أماكن العناصر فيها ويُمكنك الإطلاع علي الرابط التالي من موسوعه حسوب للتعمق أكثر في ال flexbox وطُرق إستخدامه: https://wiki.hsoub.com/CSS/Topics/Flexbox

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CENTER</title>
  <style>
    body, html {
      height: 100vh;
      display: flex;
      justify-content: center; 
      align-items: center; 
    }
  </style>
</head>

<body>

    <a href="#">LINK</a>

</body>

</html>

بالتوفيق.

كيفية توسيط عنصر anchor في css

السؤال

نور الهدى الأبراهيم

7 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Adnane Kadri

Mustafa Suleiman

نور الهدى الأبراهيم

Khaled Osama3

نور الهدى الأبراهيم

محمد عبد العزيز3

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية