CODEWITHSUNDEEP
htmlcss
BruceyBandit
BruceyBandit

Reputation: 4324

How to center a items within a container?

I have a menu and I want the items and title to be in the centre of the container as at the moment it's tight up against the left edge. I am not sure how to do this:

Here is code and fiddle: https://jsfiddle.net/af3co7h5/

#nav_menu-6 {
  border: 1px solid red;
}

.widget_title {
  margin-left: auto;
  margin-right: auto;
}

#menu-account-footer-1 li {
  margin-left: auto;
  margin-right: auto;
}
<aside id="nav_menu-6" class="widget_number_8 column-1_5 widget widget_nav_menu">
  <h5 class="widget_title">ACCOUNT</h5>
  
  <div class="menu-account-footer-container">
    <ul id="menu-account-footer-1" class="menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7970"><a href="https://balancecoffee.co.uk/stage/?page_id=285">Sign In</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7971"><a href="https://balancecoffee.co.uk/stage/?page_id=6089">Earn Rewards</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7968"><a href="https://balancecoffee.co.uk/stage/?page_id=4561">Manage Subscription</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7969"><a href="https://balancecoffee.co.uk/stage/?page_id=1109">FAQs</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7967"><a href="https://balancecoffee.co.uk/stage/?page_id=1032">Contact</a></li>
    </ul>
  </div>
</aside>

Upvotes: 0

Views: 111

Answers (2)

Itzz Nafis Khan
Itzz Nafis Khan

Reputation: 1

.container{
  border: 2px solid red;
  

}
.gallery{
  border: 2px solid blue;
  max-width: 4rem;
  margin: auto;
  
}
  <div class="container">
      
       <div class="gallery">one</div>
       <div class="gallery">two</div>
       <div class="gallery">three</div>
      

  </div>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

After your discussions, I guess using text-align: center on the parent and text-align: left on the child does the trick.

h5, ul {
  margin: 0;
}
.widget_number_8 {
  text-align: center;
}
ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: left;
}
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

Here you go:

#nav_menu-6 {
  border: 1px solid red;
}

.widget_title {
  margin-left: auto;
  margin-right: auto;
}

#menu-account-footer-1 li {
  margin-left: auto;
  margin-right: auto;
}

h5, ul {
  margin: 0;
}
.widget_number_8 {
  text-align: center;
}
ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: left;
}
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}
<aside id="nav_menu-6" class="widget_number_8 column-1_5 widget widget_nav_menu">
  <h5 class="widget_title">ACCOUNT</h5>
  <div class="menu-account-footer-container">
    <ul id="menu-account-footer-1" class="menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7970"><a href="https://balancecoffee.co.uk/stage/?page_id=285">Sign In</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7971"><a href="https://balancecoffee.co.uk/stage/?page_id=6089">Earn Rewards</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7968"><a href="https://balancecoffee.co.uk/stage/?page_id=4561">Manage Subscription</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7969"><a href="https://balancecoffee.co.uk/stage/?page_id=1109">FAQs</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7967"><a href="https://balancecoffee.co.uk/stage/?page_id=1032">Contact</a></li>
    </ul>
  </div>
</aside>

Preview

preview

Upvotes: 1

Related Questions