البرمجة

تصميم عناصر HTML بواسطة CSS

05/03/2024
3 دقيقة واحدة

To get the text at the bottom of a particular div using CSS, you can use the ::after pseudo-element to add content at the end of the div. Here’s an example based on your HTML code:

html
html>
<html>
<head>
    <style>
        #img1 {
            position: relative;
            background-color: red;
            width: 100%;
            height: 100%;
        }

        #abc {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #image {
            width: 5%;
            height: 15%;
            float: left;
        }

        #bottomText::after {
            content: "Bottom Text";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
        }

        #img1content {
            background-color: #B1C7E8;
            width: 95%;
            height: 15%;
            float: left;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        #head {
            text-align: center;
        }
    style>
head>
<body>
    <div id="img1">
        <div id="abc">
            <img id="image" src="punj.jpg" alt="PUNJ icon">
        div>
        <div id="img1content">
            <h1 id="head">Universityh1>
        div>
        <div id="bottomText">div>
    div>
body>
html>

In this example, the #bottomText div is empty, but you can use its ::after pseudo-element to add the desired text at the bottom of the #img1 div. Adjust the styles and content as needed for your specific use case.

المزيد من المعلومات

في الكود الذي قدمته، يتم وضع النص “University” في الجزء العلوي من العنصر

، ولكنك ترغب في وضعه في الجزء السفلي من هذا العنصر. يمكنك تحقيق ذلك باستخدام بعض التعديلات في CSS.

في النص الذي ترغب في تحريكه إلى الجزء السفلي، يمكنك استخدام الكود التالي:

html
<div id="img1content">
    <h1 id="head" style="margin-bottom: 0;">Universityh1>
div>

ثم، في CSS، يمكنك استخدام الخاصية position: absolute; و bottom: 0; لوضع النص في الجزء السفلي من

. يمكنك استخدام التالي:

css
#img1content {
    background-color: #B1C7E8;
    width: 95%;
    height: 15%;
    float: left;
    position: absolute;
    bottom: 0;
    left: 0;
}

بهذا، سيتم وضع النص “University” في الجزء السفلي من

.

الوسوم
05/03/2024
3 دقيقة واحدة
جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات
زر الذهاب إلى الأعلى