How to align center <li> tag?

Question

Look at my screenshot, How can I move these two

elements in the center. The elements are

. I did almost anything but not working. Anybody could help? Text-align: center not working either

.setup-box {
  margin-left: 1em;
}

.treeview-box-title {
  padding-top: .5em;
  margin-top: 1.5em;
}

.treeview-container {
  display: flex;
  justify-content: space-between;
}

.treeview-ul {
  margin: 0 1em 0 1.5em;
  text-align: left;
}

<div class="row">
  <div class="col-xs-12 col-sm-4 col-md-4">
    <div class="setup-box">
      <h4 class="treeview-box-title">Windows</h4>
      <div class="treeview-container">
        <ul class="treeview-ul">
          <li>
            <a href="#">Download Application</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4">
    <div class="setup-box">
      <h4 class="treeview-box-title">Android</h4>
      <div class="treeview-container">
        <ul class="treeview-ul">
          <li><a href="#">Google PlayStore</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 174

Answer 1

.setup-box {
  margin-left: 1em;
  border:1px solid blue;
  border-radius:0.5em;
}

.m-g-b{
margin-bottom:20px;
}

.windows-header{
  border-bottom:1px solid blue;
}

.android-header{
  border-bottom:1px solid blue;
}

.treeview-box-title {
  text-align:center;
}

.treeview-container {
  display: flex;
  padding:0.1em;
}

.treeview-ul {
  text-align: left;
}

<div class="row m-g-b">
  <div class="col-xs-12 col-sm-4 col-md-4">
    <div class="setup-box">
      <div class="windows-header">
        <h4 class="treeview-box-title">Windows</h4>
      </div>
      <div class="treeview-container">
        <ul class="treeview-ul">
          <li>
            <a href="#">Download Application</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-4 col-md-4">
    <div class="setup-box">
      <div class="android-header">
        <h4 class="treeview-box-title">Android</h4>
      </div>
      <div class="treeview-container">
        <ul class="treeview-ul">
          <li><a href="#">Google PlayStore</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 2

add to your div.row d-flex and justify content:

<div class="row mx-auto d-flex justify-content-center">