Texts aligned in the bottom right corner of the screen

Question

Texts aligned in the bottom right corner of the screen

Navigation

#1 by (2 votes)

2

How to leave two text aligned in the lower right corner of the screen in css, one on each line, example:

           IVP
Inventory Variant Position

IVP centralized just above meaning, but both in the lower right corner.

I tried this way, but without success:

<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%;
}

html css

asked by anonymous 21.05.2018 / 20:43

1 answer

StopPropagation with right click / right click Count / Dense_rank grouped sql

score 2 · Accepted Answer

One of the ways to do and using position:absolute to put the entire div in the lower right corner and text-align:center in the text to align the way you want.

NOTE: Note that you should not use width in div ok, since it is with position:absolute it assumes the width of the largest content that is inside, the maximum width then is the largest text and the other smaller text is centered in the larger text understand.

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>