Поравнање инлајн-блок елемената десно у CSS-у
Поравнајмо елемент десно:
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
Модификујте претходни задатак тако да текст унутар везе буде поравнат по центру те везе.