এই CSS টিউটোরিয়ালে, আমরা কিভাবে পাঠ্যকে কেন্দ্রীভূত করতে এবং উপাদানগুলিকে ব্লক করতে হয় তা দেখব। একটি লেআউটে অনুভূমিকভাবে এবং উল্লম্বভাবে উপাদানগুলিকে কেন্দ্রে রাখতে আপনি ব্যবহার করতে পারেন এমন বেশ কয়েকটি কৌশল রয়েছে৷
কেন্দ্রিক সারিবদ্ধ পাঠ্য উপাদানগুলি
একটি বৃহত্তর উপাদানের ভিতরে পাঠ্য সারিবদ্ধ করতে, text-align: center; ব্যবহার করুন নীচে দেখা হিসাবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
.div-class {
text-align: center;
background-color: lightblue;
}
button {
width: 200px;
}
</style>
</head>
<body>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by text-align: center</p>
</div>
</body>
</html>
সেন্টার অ্যালাইন ব্লক এলিমেন্টস:
কেন্দ্রীভূত ব্লক উপাদানগুলিকে <body> ব্যবহার করে সবচেয়ে ভালোভাবে চিত্রিত করা হয় একটি HTML নথির ট্যাগ। আপনাকে যা করতে হবে তা হল সামগ্রিক ধারকটির প্রস্থ নিয়ন্ত্রণ করুন এবং তারপর মার্জিনটিকে স্বয়ংক্রিয়ভাবে সেট করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
</body>
</html>
কেন্দ্র সারিবদ্ধ চিত্র:
একটি ছবিকে কেন্দ্রে রাখতে, CSS সিলেক্টরে, আপনার ডিসপ্লেকে ব্লক করতে পরিবর্তন করুন এবং তারপর % ব্যবহার করে ছবির উপাদানটির প্রস্থ নিয়ন্ত্রণ করুন। অথবা px . margin সেট করুন auto তে :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'Roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
img {
display: block;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
<p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
<img src="https://www.placekitten.com/500/301" alt="kittens"/>
</body>
</html>
একটি Div-এ উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্র করুন:
প্যাডিং:
একটি <div> এ উল্লম্বভাবে কেন্দ্রে রাখতে , এটা করতে বিভিন্ন উপায় আছে. প্রথম, এবং সম্ভবত সবচেয়ে সহজ, আপনার <div>-এ প্যাডিং সামঞ্জস্য করা – তারপর আপনি text-align: center ব্যবহার করতে পারেন অনুভূমিকভাবে অনুচ্ছেদ কেন্দ্রে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'Roboto';
padding: 20px;
}
.div-class {
text-align: center;
background-color: lightblue;
color: black;
}
button {
width: 200px;
}
img {
display: block;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
<div class="div-class">
<p>I'm a paragraph</p>
<button>I'm a submit button</button>
<div>I'm a div</div>
<p>And all the text is being centered by <strong>text-align: center</strong></p>
</div>
<p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
<img src="https://www.placekitten.com/500/301" alt="kittens"/>
</body>
</html>
লাইন-উচ্চতা:
আপনি টেক্সট-সারিবদ্ধকরণের সাথে কেন্দ্রীভূত ব্লক উপাদানটির উচ্চতায় লাইন-উচ্চতাও সেট করতে পারেন:উপাদানটিকে কেন্দ্রে সারিবদ্ধ করতে কেন্দ্র। আপনার একাধিক লাইন থাকলে, অভিভাবক এবং সন্তান উভয়ের জন্য লাইন-উচ্চতা ব্যবহার করুন এবং vertical-align: middle যোগ করুন এবং display: inline-block সন্তানের কাছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-lineheight {
line-height: 200px;
border: 5px double ivory;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="vertical-center-lineheight">
<p>I am vertically centered and horizontally centered in a div using lineheight and text-align: center.</p>
</div>
<div id="vertical-center-lh-multiple">
<p>I am vertically centered and horizontally centered in a div using lineheight, display: inline-block, and vertical-align: middle. Use me when you have multiple lines of text to center across horizontal and vertical axes. </p>
</div>
</body>
</html>
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
রূপান্তর:
আপনি উপাদান কেন্দ্রীভূত করতে পারেন আরেকটি উপায় অবস্থান এবং রূপান্তর ব্যবহার করে. অভিভাবক উপাদানটি অবস্থানে সেট করুন:আপেক্ষিক, শিশু উপাদানটি পরম অবস্থানে। চাইল্ড এলিমেন্টের উপরে অবস্থান করতে হবে এবং 50% এ রেখে দিতে হবে এবং তারপরে আমরা div-এ পাঠ্য সামঞ্জস্য করতে রূপান্তর বৈশিষ্ট্য ব্যবহার করি। আমরা অন্য পোস্টে এই সম্পত্তি সম্পর্কে আরও কথা বলব যাতে এই মুহুর্তে এটি 100 শতাংশ পরিষ্কার না হলে এটি ঠিক আছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-transform {
height: 200px;
position: relative;
border: 5px double ivory;
margin-bottom: 20px;
}
#vertical-center-transform p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="vertical-center-transform">
<p>I am vertically centered and horizontally centered in a div using transform. Text is <strong>NOT</strong> center aligned.</p>
</div>
</body>
</html>
ফ্লেক্সবক্স:
অবশেষে, আমরা flexbox ব্যবহার করে উপাদান কেন্দ্রীভূত করতে পারি। ডিসপ্লে সেট করুন:আপনি যে বাচ্চাদের কেন্দ্রে রাখতে চান তার মূল উপাদানের দিকে ফ্লেক্স করুন এবং তারপরে সারিবদ্ধ-আইটেমগুলি ব্যবহার করুন এবং এটিকে কেন্দ্রে জাস্টিফাই-কন্টেন্ট ব্যবহার করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
<style>
body {
width: 800px;
margin: auto;
background: darkcyan;
color: white;
font-family: 'roboto';
padding: 20px;
}
#vertical-center-flexbox {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border: 5px double ivory;
}
</style>
</head>
<body>
<div id="vertical-center-flexbox">
<p>I am vertically and horizontally centered in a div using flexbox.</p>
</div>
</body>
</html>
এইগুলি হল সবচেয়ে সাধারণ উপায় যা আপনি আপনার লেআউটে আপনার উপাদানগুলিকে কেন্দ্রীভূত করার সমস্যা সমাধান করতে পারেন৷
