Wed. Jun 7th, 2023

[ANSWERED] html – How to align center
tag?

By

Nov 20, 2022 css, html

Solution 1 :

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

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

Solution 2 :

.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>

Problem :

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>

Comments

Comment posted by George Udosen

move them to where?

Comment posted by Center align anchor within a `li` element?

Does this answer your question?

Comment posted by mplungjan

I made you a snippet. Please add relevant frameworks or themes and or CSS

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022