Centering multiple ul elements so all have width of widest ul

Centering multiple ul elements so all have width of widest ul
0

#1

I have been trying to gain a better understanding of vanilla CSS and Bootstrap 4 for the past couple of weeks. I have been reviewing other campers’ projects involving CSS specific issues to see if I could learn what needed to be implemented to give them a working solution. I have seen several instances where campers are wanting to centeri a single list (ul element) on a page or in a div. I can accomplish this without a problem.

What I am struggling with is how to make multiple the ul elements have the same width of the widest ul (longest li will dictate this) and at the same time center all of the ul elements. I have only been able to achieve the desired look (see bottom of this post), if a specify a fixed width for ul elements. I do not want to do that, because the list content could be generated dynamically and there could be some lists with shorter or longer items which could throw of the intended look. I am requesting any suggestions involving only Bootstrap 4 syntax or a combination of Bootstrap 4 and vanilla CSS.

The following is my base HTML and CSS so far.

HTML

  <div class="jumbotron text-center">
    <h1>Lists</h1>
    <h2>List # 1</h2>
    <ul class="text-left">
      <li>amet docendi</li>
      <li>amet docendi inciderint vix</li>
      <li>Nam ei ancillae apeirian lkj sdlklkjg dlkdsj dissentiunt</li>
    </ul>
    <h2>List #2</h2>
    <ul class="text-left">
      <li>amet docendi</li>
      <li>amet docendi vix</li>
      <li>Nam ei ancillae</li>
    </ul>
  </div>

CSS

ul {
  display: inline-block;
}

The above code gets me close (see below):

But what I really want is:


#2

I don’t know if Bootstrap has some handy component for this, but I did it just using divs instead of display:inline-block. (Pink background added to show that they are the same width.)
image


#3

When I view what you put in the JS Bin on a wider screen, it looks like below. I want the middle of the longest li element to be centered in the middle of the page. The pink background should only be as wide as the longest li element if that helps explain what I want better.


#4

Somehow the code that jsbin shared had a weird mix of different things I had done along the way while fiddling.

But also, I see that at certain sizes you’re right. I think that Bootstrap is interacting weirdly with it because if I remove the boostrap code, that stretching doesn’t happen.


#5

I have tried many combinations of things to make it work with Bootstrap 4 and the hack I mentioned of fixing the width was my best solution so far. I am sure there is a simple CSS solution or more than likely a Bootstrap short cut, but I am out of ideas for now.