सीएसएस में इनलाइन-ब्लॉक तत्वों को दायें किनारे पर संरेखित करना
तत्व को दायें किनारे पर संरेखित करें:
html<div class="parent">
<span class="child">text</span>
</div>css.parent {
text-align: right;
padding: 10px 0;
border: 1px solid red;
}
.child {
display: inline-block;
padding: 10px 20px;
border: 1px solid green;
}
Результат:
Задание 1
एक डिव दी गई है जो किसी मूल तत्व के अंदर है:
html<div class="parent">
<div class="child">text</div>
</div>css.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
padding: 10px;
border: 1px solid green;
}
डिव-चाइल्ड को एक इनलाइन-ब्लॉक तत्व में बदलें, फिर इसे मूल तत्व के दायें किनारे पर संरेखित करें।
Задание 2
पिछले कार्य को इस तरह संशोधित करें कि
डिव दायें किनारे से सटकर न रहे।
इसके लिए मूल तत्व में दायाँ padding जोड़ें।
Задание 3
पिछले कार्य को इस तरह संशोधित करें कि
डिव दायें किनारे से सटकर न रहे।
इसके लिए चाइल्ड तत्व को दायाँ
margin दें।
Задание 4
एक लिंक दी गई है जो किसी मूल तत्व के अंदर है:
html<div class="parent">
<a href="" class="child">text</a>
</div>css.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
width: 100px;
padding: 10px;
border: 1px solid green;
}
लिंक को एक इनलाइन-ब्लॉक तत्व में बदलें, फिर इसे मूल तत्व के दायें किनारे पर संरेखित करें।
Задание 5
पिछले कार्य को इस तरह संशोधित करें कि लिंक के अंदर का टेक्स्ट उस लिंक के केंद्र में संरेखित हो।