CSS - position an element according to its bottom-left corner, and not according to the default top-left corner. RRS feed

  • Question

  • User2110873642 posted

    for game graphics, i made textures from a variable height. i want to simulate them to visually stand on the ground in a html page. so i need them to dock their bottoms to a given Y-axis. The hard part is that the objects do not have a known height.

    by default all objects are positioned by their top-left corner. but i do not want this.

    i came up with the following solution: 

    i styled all textures with

     transform: translateY(-100%);

    it does what i want, but this gives me inaccurate results. the textures are floating in the air, unless i specify a height style that is unknown. the img element is autosized. but the translateY ALWAYS seems to asume the height a little bigger.

    i cannot use "; bottom:0px;" , because i would lose the ability for furniture to be placed side by side.

    here is an example. The red line at the bottom of the wall, is a DIV. in this div the textures are placed. i use the DIV to tell the textures where the ground is. i gave the div a color, to see it in the test.

    Tuesday, July 14, 2020 5:08 PM

All replies