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:
htmlhtml>
<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.
مقالات ذات صلة
-
كيفية كتابة جملة IF بعدة شروط في PHP07/03/2024
-
تحسين عرض البيانات في Excel باستخدام VBA01/04/2024
-
حقن الاعتماد في Angular: دليل الاستخدام22/03/2024
-
استخدام Fabric.js في Angular 207/04/2024
المزيد من المعلومات
في الكود الذي قدمته، يتم وضع النص “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” في الجزء السفلي من
.