সিএসএস align-self প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Internet Explorer | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| align-self: | ২১.০ | ১২.০ | ১১.০ | ২০.০ | ৯.০ | ১২.১ |
সংজ্ঞা ও ব্যবহার
ফ্লেক্সিবল কন্টেইনারে এর ভিতরে align-self প্রোপার্টি নির্বাচিত আইটেমের জন্য এলাইনমেন্ট নির্দেশ করে।
পরামর্শঃ
- align-self প্রোপার্টি ফ্লেক্সিবল কন্টেইনারে align-items প্রোপার্টি override করে ।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| strech | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
align-self: auto/stretch/center/flex-start/flex-end/baseline/initial/inherit;উদাহরণ
align-self: center এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<style>
#self {
width: 320px;
height: 200px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start; /* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#self div {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}
#myDiv {
-webkit-align-self: center; /* Safari 7.0+ */
align-self: center;
}
</style>
</head>
<body>
<div id="self">
<div style="background-color:red;">লাল</div>
<div style="background-color:lightgreen;" id="myDiv">সবুজ</div>
<div style="background-color:lightblue;"> অধিক কন্টেন্ট এর সাথে নীল div</div>
</div>
<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার(১০) এবং তার আগের ভার্সন align-content প্রোপার্টি সাপোর্ট করে না। </p>
<p><b>নোটঃ </b> সাফারি(৭) এবং তার পরের ভার্সন সাপোর্ট করে। </p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.alignSelf="center"উদাহরণ
object.style.alignSelf="center" এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 320px;
height: 200px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start; /* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}
#myDiv {
-webkit-align-self: center; /* Safari 7.0+ */
align-self: center;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:red;">লাল</div>
<div style="background-color:lightgreen;" id="myDiv">সবুজ </div>
<div style="background-color:lightblue;"> অধিক কন্টেন্টের সাথে নীল div</div>
</div>
<p> alignSelf প্রোপার্টির ভ্যালু সেট করার জন্য "উদাহরণ দেখুন" বাটনে ক্লিক করুন। </p>
<button onclick="myFunction()">উদাহরণ দেখুন </button>
<script>
function myFunction() {
document.getElementById("myDiv").style.WebkitAlignSelf = "stretch"; // Code for Safari 7.0+
document.getElementById("myDiv").style.alignSelf = "stretch";
}
</script>
<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার(১০) এবং তার আগের ভার্সন align-content প্রোপার্টি সাপোর্ট করে না। </p>
<p><b>নোটঃ </b> সাফারি(৭) এবং তার পরের ভার্সন সাপোর্ট করে।</p>
</body>
</html>
ফলাফল
align-self প্রোপার্টির ভ্যালু-সমূহ
- auto - ডিফল্ট ভ্যালু। align-item প্রোপার্টি প্যারেন্ট কন্টেইনারে এলিমেন্ট ইনহেরিট করে। অথবা "প্রসারিত" করে যদি এর কোনো প্যারেন্ট কন্টেইনার না থাকে ।
- stretch - flex container লাইনগুলো অবশিষ্ট স্থান পর্যন্ত প্রসারিত করে।
- center - flex container এ লাইনগুলো কেন্দ্রে থাকে।
- flex-start - flex container এ লাইনগুলো শুরুতে থাকে।
- flex-end - flex container এ লাইনগুলো শেষে থাকে।
- baseline - আইটেমগুলো কন্টেইনারের বেইসলাইনে অবস্থান করে।।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit -এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
align-self প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।