1

I am trying to do a DIV with vertically aligned text and no scroll bar. After some research I found I have to do something like this for the vertical alignment:

.container {
  height: 200px;
  position: relative;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
<div class="container">
  <div class="vertical-center">
    <p ng-dblclick="send({payload:true})">
      TEXT
    </p>
  </div>
</div>

This works. I have then to add the overflow: hidden; property and this I am not able to do. I tried several ways (like adding a third div between the twos with that property set) but always unable to achieve my goal.

EDIT: to clarify some of the questions I had. What I am trying to do is a small clickable text box. Width and height are fixed. My text might be longer than the width and/or might takes more lines than the height. So, I want the text always vertically centred and no scroll bar (nor x - nor y).

EDIT 2: the solution with flex works, it is what I was looking for. Thanks.

I hope it is clear.

Any help would be much appreciated. Thanks.

raw dani
  • 11
  • 2
  • Welcome. Please see [ask], then revise your post title to ask a clear, specific question. Don't tack on tags. – isherwood Feb 15 '22 at 16:35
  • 2
    Protips: Don't use inline styles, especially when you're making the text white. It's just a pain for all involved. And you don't need vendor prefixes for `transform`. – isherwood Feb 15 '22 at 16:36
  • No idea what your asking. What is the end result you want? – DreamTeK Feb 15 '22 at 16:39
  • 1
    A better way to center things may be with flexbox. I'm not exactly sure what you're trying to do here, and there is no scrollbar except the one that the short demo box puts on it. If you view the demo in fullscreen it's gone. – isherwood Feb 15 '22 at 16:39
  • 1
    you have a scrollbar because your container has a fixed height of 200px (add background-color and you will see it directly when scrollbar is used) – zerbene Feb 15 '22 at 16:42

3 Answers3

1

If what you want is to just align the content in the middle of the container vertically then you can just use flex

.container {
  background: #ddd;
  height: 200px;
  display: flex;
  align-items: center
}
<div class="container">
  <p>
    TEXT
  </p>
</div>
DreamTeK
  • 32,537
  • 27
  • 112
  • 171
  • 1
    This is the more modern and maintainable approach. Unless there is some compelling reason to avoid flexbox, this is the solution you should go with. – Alexander Nied Feb 15 '22 at 16:48
  • You should be offering this in a comment, not repeating very common answers. https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically – isherwood Feb 15 '22 at 16:49
  • @isherwood Cant do a snippet in a comment. Just trying to help someone out. – DreamTeK Feb 15 '22 at 16:50
  • @rawdani glad I could help. Please mark the answer as resolved if it fixed your question and upvote if it was helpful. – DreamTeK Feb 16 '22 at 10:23
0

use the css

body{
    overflow-y: hidden;
}
.container {
  height: 200px;
  position: relative;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
<div class="container">
  <div class="vertical-center">
    <p ng-dblclick="send({payload:true})">
      TEXT
    </p>
  </div>
</div>
sameerAhmedjan
  • 11
  • 1
  • 6
0

Another option

p{
  background: #ddd;
  height: 200px;
  line-height: 200px;
}
<p>TEXT</p>
Kyle
  • 302
  • 2
  • 5