css Question posted in
Some basic documentation can be found here.

Css – How to position an element relative to the size of its parent?

I would like to display a symbol (⌂) and put a number inside (this is for a home dashboard and is supposed to give the temperature inside the house).

I know about absolute positioning but it looks like that the position, despite being relative to a known parent, has to be in absolute values (in px for instance).

It means that in the example below, I need to adjust (increase) the left: 1px; value until it is visually centered:

.house {
  font-size: 500%;
  position: relative;
}

.temp {
  font-size: 25px;
  position: absolute;
  top: 40px;
  left: 1px;
}
<div class="house">
  ⌂
  <div class="temp">13</div>
</div>

I was hoping for an "absolute, relative to the parent dimensions" setting, in % (or other relative measurements). Is this possible?

Since this is a one-shot adjustment in my case (the dashboard is mine, it does not change and I can fiddle manually with this value) I will probably go fo the visually "good enough" solution, but I would be glad to use something more flexible.

Another possibility is to make the calculations in JS (it I feasible since I am using a JS framework anyway, but I am surprised there is no pure CSS solution)

Tags:

4

Answers


  1. 0

    Fist of all add something like

    width: max-content;
height: max-content;

    to the parent (.house) so this won’t happen:
    size

    after that just position the child relative (%)

    .temp {
  font-size: 25px;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);    
}

    house

    I changed the vertical center to px for this example (because the middle of the house is not in the center):

    .temp {
  font-size: 25px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
}
    Login or Signup to reply.
  2. 0

    I think following could be flexible if not what you’re looking for.

    .house {
  font-size: 500%;
  position: relative;
  border: 1px solid #F00;
  height: 60px;
  line-height: 60px;
  aspect-ratio: 1;
  text-align: center;
}

.temp {
  font-size: 25px;
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: start;
  justify-content: center;
}
    <div class="house">
  ⌂
  <div class="temp">13</div>
</div>
    Login or Signup to reply.
  3. 0

    use flex display:

    .house {
  display: flex;
  font-size: 500%;
  position: relative;
  justify-content: center;
}

.temp {
  font-size: 25px;
  position: absolute;
  top: 40px;
}
    <div class="house">
  ⌂
  <div class="temp">13</div>
</div>
    Login or Signup to reply.
  4. 0

    Build that symbol using CSS:

    .temp {
  --t: 4px; /* thickness */

  display: inline-block;
  font-size: 25px;
  padding-inline: 5px;
  margin-top: 1lh;
  border: var(--t) solid;
  border-top: 0;
  position: relative;
}
.temp:before {
  content:"";
  position: absolute;
  inset: auto calc(19% - var(--t)) 100%;
  translate: 0 50%;
  aspect-ratio: 1;
  border: inherit;
  border-right: none;
  rotate: 135deg;
}
    <div class="temp">13</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search