Horizontally center UL in bootstrap-vue popover

  bootstrap-vue, css, html, javascript

I’m using bootstrap-vue in order to get a decent looking popover where I can have a group of links. The issue is that no matter how I er how much I seem to tweak the css properties, I can’t get the horizontal list centered in the div along with some space between each list item

I’m getting this now, after removing padding (the padding was spacing them fine, but making the centering worse):

enter image description here

I just want that list to be centered horizontally with some padding between each link

export default {
data () {
  timeSpent: '0m',
  }
  }
#menu-outer {
  height: 84px;

}

.table {
  display: table;   /* Allow the centering to work */
  margin: 0 auto;
}

ul#horizontal-list {
  width: 100%;
  list-style: none;
  padding-top: 20px;
}

ul#horizontal-list li {
  display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div class="col-lg-3 time-spent-section">
              <p>Time Spent</p>
              <b-button id="popover-target-1">
                {{timeSpent}}
              </b-button>
              <b-popover target="popover-target-1" triggers="hover" placement="bottom">
                <template #title>
                  <div id="menu-outer">
                    <div class="table">
                      <ul id="horizontal-list">
                        <li><a href="#">+15m</a></li>
                        <li><a href="#">+30m</a></li>
                        <li><a href="#">+45m</a></li>
                        <li><a href="#">+1h</a></li>
                        <li><a href="#">++</a></li>
                      </ul>
                    </div>
                  </div>
                </template>
                I am popover <b>component</b> content!
              </b-popover>
            </div>

Source: Ask Javascript Questions

LEAVE A COMMENT