सीएसएस में इनलाइन-ब्लॉक तत्वों को दायें किनारे पर संरेखित करना

तत्व को दायें किनारे पर संरेखित करें:

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

पिछले कार्य को इस तरह संशोधित करें कि लिंक के अंदर का टेक्स्ट उस लिंक के केंद्र में संरेखित हो।