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

محمد ال شكر · الأحد في 10:55

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

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

عمر قره محمد · الأحد في 10:57

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

Adnane Kadri · الأحد في 11:00

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

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

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

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

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

a{
    margin: 1px auto;
}

Mustafa Suleiman · الأحد في 11:01

هناك طرق مختلفة، ومنها أن يكون العنصر الأب (الذي يحتوي على الرابط) يستخدم 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>

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

محمد ال شكر · الأحد في 12:28

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

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

كود 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 · الأحد في 12:59

بتاريخ 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 بحيث يتم توسيط جميع العناصر بداخلها عموديا وأفقيا. هذا سيجعل الرابط يتمركز في وسط الصفحة بشكل صحيح.

محمد ال شكر · الأحد في 13:07

بتاريخ 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 بحيث يتم توسيط جميع العناصر بداخلها عموديا وأفقيا. هذا سيجعل الرابط يتمركز في وسط الصفحة بشكل صحيح.

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

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

السؤال

محمد ال شكر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد ال شكر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Khaled Osama3

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد ال شكر

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية