When Child Element Is Bigger Than The Parent, How To Place The Child Centered Above/below The Parent Element (plus Rotate It)?

I have an HTML element that is a child of a small parent element (small circle or rectangle).

&l

Solution 1:

First we need to center some thing in the center of the parent. For that we use left: 50%; top: 50%; top: 50%. position: absolute; is needed as well.

This centers the top left corner of the text span rectangle at the parent's center.

Then we need to do the transformations including the rotation. Without rotation, we'd only need translate(-50%, 4px) for the bottom label and translate(-50%, -4px) translate(0, -100%); for the top label. For proper rotation, we need to put it between translations. We can use transform-origin, which makes the transformation slightly easier to understand, or use transform only, which is more symmetric, but harder to understand. Here is how to understand the transformations that do not use transform-origin: The default transform-origin is the object center (50% 50%), which is initially 50% to the right and 50% down from the parent's center. We need to first translate the element to the desired side of its original center (top/bottom/left/right), then rotate and then translate to from the element's original center to the parent's center (translate(-50%, -50%)).

Note that the angles are clockwise due to the Y axis pointing down.

We can develop very similar transforms for all sides - top, bottom, left and right.

.handle {
  border: 1px solid black;
  border-radius: 4px;
  position: absolute;
  width: 6px; /* width = 2*border-radius - 2*border-width */height: 6px; 
}

.label {
    font-family: monospace;
    opacity: 0.5;
    background: red;
    left: 50%;
    top: 50%;
    position: absolute;
    display: block;
    white-space: nowrap;
}

/* Variant with transform-origin */.label_top1 {
  transform-origin: 50%0%;
  transform: translate(-50%, 0px) rotate(-40deg) translate(0px, -4px) translate(0, -100%);
}

.label_bottom1 {
  transform-origin: 50%0%;
  transform: translate(-50%, 0px) rotate(-40deg) translate(0, 4px);
}

/* Variant without transform-origin */.label_top {
  transform: translate(-50%, -50%) rotate(-40deg) translate(0px, -4px) translate(0, -50%);
}

.label_bottom {
  transform: translate(-50%, -50%) rotate(-40deg) translate(0, 4px) translate(0, 50%);
}

.label_left {
  transform: translate(-50%, -50%) rotate(-40deg) translate(-4px, 0) translate(-50%, 0);
}

.label_right {
  transform: translate(-50%, -50%) rotate(-40deg) translate(4px, 0) translate(50%, 0);
}

<divclass="handle"style="left: 50px; top: 100px"><spanclass="label label_top">0|0</span></div><divclass="handle"style="left: 50px; top: 100px"><spanclass="label label_bottom">0|0</span></div><divclass="handle"style="left: 120px; top: 100px"><spanclass="label label_top">000|000</span></div><divclass="handle"style="left: 120px; top: 100px"><spanclass="label label_bottom">000|000</span></div><divclass="handle"style="left: 250px; top: 100px"><spanclass="label label_top">----top---|---top----</span></div><divclass="handle"style="left: 250px; top: 100px"><spanclass="label label_bottom">--bottom--|--bottom--</span></div><divclass="handle"style="left: 250px; top: 100px"><spanclass="label label_left">---left---|---left---</span></div><divclass="handle"style="left: 250px; top: 100px"><spanclass="label label_right">---right--|--right---</span></div>

Share