2

Como deixar dois textos alinhados no canto inferior direito da tela em css, um em cada linha, exemplo:

           IVP
Inventory Variant Position

IVP centralizado logo acima do significado, porém ambos no canto inferior direito.

Tentei assim, mas sem sucesso:

<div class='page test-page' id='ivp-page-1'>
    <h3>IVP</h3>
    <h4>INVENTORY VARIANT POSITION</h4>
</div>

h3, h4 {
    position: relative;
    width: 0;
    min-width: 825px;
    height:700px;
    text-align: right;
    float: right;
    margin-left:3.7%;
    margin-right:3.7%;
    padding-left:0.5%;
    padding-right:0.5%;
}

1 Resposta 1

3

Uma das formas de fazer e usando position:absolute para colocar a div inteira no canto direito inferior e text-align:center no texto para alinhar da forma que vc quer.

OBS: repare que vc não deve usar width na div ok, pois come ela está com position:absolute ela assume a largura do maior conteúdo que está dentro, a largura máxima então é a do maior texto e o outro texto menor fica centralizado no texto maior entende.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.test-page {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
h3, h4 {
    text-align: center;
    margin: 0;
}
<div class='page test-page' id='ivp-page-1'>
    <h3>IVP</h3>
    <h4>INVENTORY VARIANT POSITION</h4>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .