CSS-এ ইনলাইন-ব্লক এলিমেন্ট সেন্টার করণ

উদাহরণস্বরূপ, আসুন ইনলাইন-ব্লক এলিমেন্টগুলোকে কেন্দ্রে সাজাই:

<div class="parent">
	<span class="child">text</span>
	<span class="child">text</span>
	<span class="child">text</span>
</div>

.parent {
	text-align: center;
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid green;
}

কিছু প্যারেন্টের ভিতরে ডিভগুলি দেওয়া আছে:

<div class="parent">
	<div class="child">text 1</div>
	<div class="child">text 2</div>
	<div class="child">text 3</div>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	padding: 10px;
	border: 1px solid green;
}

চাইল্ড ডিভগুলিকে ইনলাইন-ব্লক এলিমেন্টে রূপান্তর করুন, তাদের আনুভূমিক margin 5px সেট করুন, এবং তারপর সেগুলিকে তাদের প্যারেন্টের সাপেক্ষে আনুভূমিকভাবে সেন্টার করুন।