2

I currently have the following html.

<div id="img_preview_text_container" style="position: absolute; top: 156px; left: 50px; font-family: Oklahoma; width: 376px; height: 75px; color: rgb(255, 0, 0);">
<div class="customOnePreviewText">ASDF</div>
</div>

The css for .customOnePreviewText is:

.customOnePreviewText {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 48px;
}

The challenge I'm having is that the text appears in the upper part of the div. I'd like the type to be centered in the div meaning not a bottom part off or the entire div to just be the size of the text. This is what I have now.

enter image description here

the black area is the div highlighted.

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
FabricioG
  • 3,107
  • 6
  • 35
  • 74
  • 1
    that space is preserved for [Descenders](https://en.wikipedia.org/wiki/Descender) letters like `g,y` – Rainbow Nov 14 '19 at 23:23
  • Can that be removed? I only use CAPS . @ZohirSalak – FabricioG Nov 14 '19 at 23:24
  • [Found it](https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element), The thing is you'll have to adjust the line height to your font and if you ever change it you'll have to adjust it again which is just a pain – Rainbow Nov 14 '19 at 23:45

2 Answers2

1

Instead of using the translate within the inner div, you could adjust the margin from 0 to 0 25% (0 top/bottom, 25 left/right) to center the writing. (see snippet - although you can't see the image in the snippet, you get the idea)

.customOnePreviewText {
  margin: 0 25%;
  position:absolute;
  top: 50%;
  font-size: 48px;
}
<div id="img_preview_text_container" style="position: absolute; top: 156px; left: 50px; font-family: Oklahoma; width: 376px; height: 75px; color: rgb(255, 0, 0);">
<div class="customOnePreviewText">ASDF</div>
</div>

An alternative to the above would be to use translateX(50%), but I think the above is a simpler solution. Your code seems to show confused usage of translateY (which moves the text down rather than across). Yet another solution would be to set a left position.

I would highly recommend switching to using relative position as you may find the task of positioning the text and image a lot simpler - just my tuppence.

Good luck!

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
0

Are you sure there's no more html/css that might be affecting it? I copied the code you've provided and can't seem to reproduce the issue.

Have you tried using flexbox? Hard to say if this will solve your problem as I couldn't reproduce it but should make your life easier in any case.

.customOnePreviewText {
  margin: 0;
  position: absolute;
  font-size: 48px;
  background-color:white;
}

#img_preview_text_container {
  position: absolute;
  font-family: Oklahoma; 
  width: 376px;
  height: 75px; 
  color:rgb(255, 0, 0); 
  background-color:black;
  display:flex;
  align-items: center
}
<div id="img_preview_text_container">
  <div class="customOnePreviewText">ASDF</div>
</div>
nathan.medz
  • 1,595
  • 11
  • 21