CODEWITHSUNDEEP
htmlcssscrollscrollbar
Banjer_HD
Banjer_HD

Reputation: 300

Horizontal scrollbar of div affecting vertical align

How to stop a horizontal scrollbar from affecting the vertical align of the text inside a div? I want the text centered and the scrollbar can be under it.

Is it also possible to place the scrollbar on the underside of the outer div (without affecting its height) and affecting the scroll of the inner div with it? 

.outer {
  width: 50%;
  padding: 30px;
  background-color: #008000;
}

.inner {
  border: 1px solid red;
  height: 50px;
  overflow: scroll;
  white-space: nowrap;
}
<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nulla ac leo ullamcorper tristique. Donec lobortis a dolor sit amet congue. Etiam nisl lectus, euismod id enim ac, pretium blandit lectus. Cras congue placerat purus in malesuada. In
    ex dui, iaculis id nisi eget, fermentum condimentum ante. Etiam a facilisis justo, vitae auctor lacus. Duis at nisi sed lacus tincidunt accumsan at id lacus. Praesent at luctus velit, eget interdum turpis.
  </div>
</div>

Screenshot

The red line is the middle and the text needs to be there, which isn't because it's centering the whole div including the scrollbar in it

enter image description here

Upvotes: 0

Views: 70

Answers (2)

user3589620
user3589620

Reputation:

Add line-height. line-height = height.

.outer {
  width: 50%;
  padding: 30px;
  background-color: #008000;
}

.inner {
  border: 1px solid red;
  height: 50px;
  line-height: 50px;
  overflow: scroll;
  white-space: nowrap;
}
<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nulla ac leo ullamcorper tristique. Donec lobortis a dolor sit amet congue. Etiam nisl lectus, euismod id enim ac, pretium blandit lectus. Cras congue placerat purus in malesuada. In
    ex dui, iaculis id nisi eget, fermentum condimentum ante. Etiam a facilisis justo, vitae auctor lacus. Duis at nisi sed lacus tincidunt accumsan at id lacus. Praesent at luctus velit, eget interdum turpis.
  </div>
</div>

Upvotes: 0

sikarak
sikarak

Reputation: 108

You can vertically center your text easily with flex : 

    .inner {
  display: flex;
  align-items: center;
  border: 1px solid red;
  height: 50px;
  overflow: scroll;
  white-space: nowrap;
 }

 .text {
   margin: auto;
 }

    <html>
  <body>
  <div class="outer">
    <div class="inner">
     <p class="text">Text here</p>
    </div>
  </div>
  </body>
</html>

For your second question for the scrollbar outside the div i don't think you can do it, but maybe someone here have the solution :)

Upvotes: 1

Related Questions