সিএসএস লেআউট - হলট ও ভার্টিক্যাল অ্যালাইন
- পূর্ববর্তী পৃষ্ঠা CSS inline-block
- পরবর্তী পৃষ্ঠা CSS কম্বাইনার
উপাদান আড়চ্যুত
উপাদানকে আড়চ্যুত অবস্থান
বক্তব্য উপাদান (যেমন <div>) হলেও শ্রেণীভুক্ত উপাদানকে আড়চ্যুত অবস্থান করতে margin: auto;
উপাদানের প্রস্থতি সজ্জিত করা করলে, তা কোনও কান্তিকান্ত মার্গের সীমানা পর্যন্ত প্রসারিত হবে না
তারপর, উপাদানটি নির্ধারিত প্রস্থতি অবকাঠামো দখল করবে, বাকি জায়গা দুই বাহ্যিক মার্গের মধ্যে সমতুল্যভাবে বিতরণ করা হবে:
ইনস্ট্যান্স
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 20px;
}
注意：যদি সজ্জিত করা হয় না width প্রতিকৃতি (বা তা 100% হিসাবে সজ্জিত করুন), তবে মধ্যবর্তী অবস্থান করা হবে না
টেক্সটকে মধ্যবর্তী অবস্থান
যদি শুধুমাত্র উপাদানের মধ্যে টেক্সটকে মধ্যবর্তী অবস্থান করতে চান, তবে text-align: center;:
ইনস্ট্যান্স
.center {
text-align: center;
border: 3px solid green;
}
টীকা:টেক্সটটি কিভাবে সামান্যতর করার বিষয়ে আরও উদাহরণ খুঁজতে পাঠিয়ে দেওয়া হয়েছে সিএসএস টেক্সট এই চাপ্তি
চিত্রটির মধ্যবর্তী অবস্থান
যদি চিত্রটির মধ্যবর্তী অবস্থান করতে চান, তবে বাম-ডান বাহ্যিক মার্গগুলোকে সজ্জিত করুন auto，并将其设置为块元素：
ইনস্ট্যান্স
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
左和右对齐 - 使用 position
对齐元素的一种方法是使用 position: absolute; :
ইনস্ট্যান্স
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 20px;
}
注意：绝对定位的元素将从正常流中删除，并可能出现元素重叠。
左和右对齐 - 使用 float
对齐元素的另一种方法是使用 float প্রতিভা:
ইনস্ট্যান্স
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
注意：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用 clearfix hack 来解决此问题（请看下面的例子）。
clearfix Hack
然后我们可以向包含元素添加 overflow: auto;，来解决此问题：
ইনস্ট্যান্স
.clearfix {
overflow: auto;
}
垂直对齐 - 使用 padding
有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距：
ইনস্ট্যান্স
.center {
padding: 70px 0;
border: 3px solid green;
}
如需同时垂直和水平对齐，请使用 padding এবং text-align: center;:
ইনস্ট্যান্স
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
সামান্য সামান্য - যোগাযোগ line-height
একটি অন্যান্য পদ্ধতি হলতার মানসমান height প্রতিভার মানের line-height প্রতিভা:
ইনস্ট্যান্স
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* যদি বহুলতা টেক্সট থাকে, তবে নিচের কোডটি যোগ করুন: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
সামান্য সামান্য সামান্য - যোগাযোগ position এবং transform
আপনার পছন্দ হলেন না padding এবং line-heightতবে, একটি অন্যান্য সমাধান হল যোগাযোগ করা position এবং transform প্রতিভা:
ইনস্ট্যান্স
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
টীকা:আপনি আমার 2D ট্রান্সফর্ম এই চাপটিতে আপনি transform এট্রিবিউটের বিষয়ে আরও বেশি জানবেন。
উপরোক্ত লাইনের বর্ণনা
আপনিও flexbox দ্বারা কনটেন্টকে মধ্যস্থানীয় করতে পারেন। প্রতিবেদন করুন যে, IE10 এবং তার পূর্ববর্তী সংস্করণগুলি flexbox-কে সমর্থন করে না:
ইনস্ট্যান্স
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
টীকা:আপনি আমার CSS Flexbox এই চাপটিতে আপনি Flexbox সম্পর্কে আরও বেশি জানবেন。
- পূর্ববর্তী পৃষ্ঠা CSS inline-block
- পরবর্তী পৃষ্ঠা CSS কম্বাইনার
