توسيط العناصر في CSS

Mohammed Hhhh · 25 مايو 2022

هل هذه الطريقه التي قمت انا بعملها صحيحه لجعل كلمة scroll now في المنتصف ام يوجد افضل و شكرا

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>coding_Now</title>
</head>

<body>
    <!-- nav bar and header -->
    <header>
        <nav class="navbar">
            <h1 style="font-family: 'Space Mono', monospace; font-weight: 900;"> <span class="one">system</span>.<span class="two">out</span>.<span class="three">println</span>(<span class="four">"Coding Now!"</span>)</h1>
            <ul>
                <li> <a href="">About us</a> </li>
                <li> <a href="">Download Now!</a> </li>
                <li> <a href="">Program Advantages</a> </li>
            </ul>
        </nav>
    </header>
    <!-- scroll now  -->
    <section class="container_scroll">
        <h1 class="big_scroll">Scroll Now</h1>
        <h1 class="scroll"></h1>
    </section>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box ;
}

body {
    background-color: #121420;
    font-family: 'Roboto', sans-serif;
}

/* logo colors */
/* nav bar code  and header*/
.one {
    color: rgb(104, 0, 139);
}
.two {
    color: rgb(232, 185, 0);
}
.three {
    color: rgb(0, 0, 160);
}
.four {
    color: green;
}
/* nav bar code  and header*/
.navbar {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    margin: 14px;
    color: rgb(172, 172, 172);
}
.navbar ul li {
    list-style: none;
    display: inline-block;
}
.navbar ul li a {
    font-size: 18px;
    font-weight: 700;
    color: #5d69a9;
    text-decoration: none;
    padding: 10px;
    transition:1s all;
    -webkit-transition:0.5 all;
    -moz-transition:1s all;
    -ms-transition:1s all;
    -o-transition:1s all;
}
.navbar ul li a:hover {
    text-shadow: 2px 5px rgb(0, 30, 86) ;
    border:solid red 2px ;
}
/* end of header and nav bar */
.container_scroll{
    border: solid red 1px ;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 206px;
}
.big_scroll{
    font-size: 120px;
    color: #121420  ;
    text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0), 0 -1px rgb(0, 0, 0);

}

تم التعديل في 25 مايو 2022 بواسطة Sam Ahw
توضيح السؤال

Sam Ahw · 25 مايو 2022

من صورة النتيجة غير واضح وجود كلمة Scroll now للتأكد من النتيجة يجب عليك إزالة لون الخلفية أو تغيير لون النص ليظهر بشكل واضح، ولكن بشكل عام يوجد العديد من الطرق لتوسيط العناصر والنصوص في CSS، وبما أن العنصر الذي ترغب بتوسيطه عنصر نصي فقط يمكنك إضافة الخاصية text-align إلى هذا العنصر كالتالي:

.center {
  text-align: center;
}

<section class="container_scroll">
        <h1 class="big_scroll center">Scroll Now</h1>
        <h1 class="scroll"></h1>
</section>

يمكنك الاطلاع على مزيد من الطرق من هذه المقالات والأسئلة:

Mohammed Hhhh · 25 مايو 2022

كيف اقوم بعمل مثل هذا العنصر و توسيطه في منتصف الشاشه انا حاولت عمله عن طريق ال flex و استطعت توسيط الكلمه الكبيره و لكن الكلمه التي في المنتصف لم استطع و ضعها في المنتصف و حاولت و ضعها في ::before

Adnane Kadri · 25 مايو 2022

بتاريخ 9 ساعات قال Mohammmed Mahmoud:

كيف اقوم بعمل مثل هذا العنصر و توسيطه في منتصف الشاشه انا حاولت عمله عن طريق ال flex و استطعت توسيط الكلمه الكبيره و لكن الكلمه التي في المنتصف لم استطع و ضعها في المنتصف و حاولت و ضعها في ::before

يمكنك استعمال الوضعية المطلقة position absolute لتوسط العنصر الابن scroll ضمن العنصر الاب scroll_container ويمكنك التحكم في وضعيته بضبط قيم top و left بالنسبة لهذا العنصر.

في هذا ستحتاج أولا اعطاء العنصر scroll_container الوضعية النسبية position relative:

.container_scroll{
    ..
    
    position: relative;
}

ثم اعطاء العنصر scroll الوضعية المطلقة وضبط تموضعه:

.scroll{
   position: absolute;
   top: 50%;
   left: 50%;
}

يمكنك التعرف أكثر عن أساسيات التموضع في css.

توسيط العناصر في CSS

السؤال

Mohammed Hhhh

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

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

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

Recommended Posts

Sam Ahw

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

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

Mohammed Hhhh

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

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

Adnane Kadri

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية