Question 179442 in Html Question posted in
Some basic documentation can be found here.

? Can rows be scrollable & have centered content?

How can I get the inner div items to remain centered with complete scrolling capability?

Currently the content on the left hand side is truncated. The spacing of the items should not change and each inner div needs to remain it’s own row.

See https://jsfiddle.net/mf89h3tg/13/. I have also pasted the code below.

.outer-div {
  display: block;
  overflow: auto;
  border-style: dashed;
  border-width: 2px;
  border-color: blue;
  margin: 100px;
}

.inner {
  display: flex;
  justify-content: center;
}
<div class="outer-div">
  <div class="inner">
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
  </div>
  <div class="inner">
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
  </div>
</div>

I’ve tried variations on the flex display to no avail.

Tags:

2

Answers


  1. 0

    You could use margin-inline: auto; to center the row.

    See this CodePen if it solves your problem.

    Login or Signup to reply.
  2. 0

    Add the center tag let your button be inside of the tag

     <div class="outer-div">
  <div class="inner">
  <center>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
    <button>
      Hello
    </button>
  </div>
  <div class="inner">
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
    <button>
      World
    </button>
   </center>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search