Alinhamento de elementos inline-block à direita em CSS
Vamos alinhar o elemento à direita:
<div class="parent">
<span class="child">texto</span>
</div>
.parent {
text-align: right;
padding: 10px 0;
border: 1px solid red;
}
.child {
display: inline-block;
padding: 10px 20px;
border: 1px solid green;
}
:
Dado um div dentro de algum elemento pai:
<div class="parent">
<div class="child">texto</div>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
padding: 10px;
border: 1px solid green;
}
Transforme o div filho em um elemento inline-block, então alinhe-o à direita do elemento pai.
Modifique a tarefa anterior para que o
div não fique colado à borda direita.
Para isso, adicione um padding direito
ao elemento pai.
Modifique a tarefa anterior para que o
div não fique colado à borda direita.
Para isso, defina uma margin direita
ao elemento filho.
Dado um link dentro de algum elemento pai:
<div class="parent">
<a href="" class="child">texto</a>
</div>
.parent {
padding: 10px 0;
border: 1px solid red;
}
.child {
width: 100px;
padding: 10px;
border: 1px solid green;
}
Transforme o link em um elemento inline-block, então alinhe-o à direita do elemento pai.
Modifique a tarefa anterior para que o texto dentro do link fique centralizado nesse link.