• Register
0 votes
32 views

Problem :

I have below div within a div within a div:

<div id="wrapper" class="center">
    <div id="content" class="center">
        <div id="listDiv" class="center">
           <ul>
               <li><a href='#' id="1" >My Link one</a> </li>
               <li><a href='#' id="2" >My Link 2</a> </li>
               <li><a href='#' id="3" >My Link three</a> </li>
           </ul>
        </div>
    </div>
</div>

And in my style sheet, I have the class that centers each div within a page, and centers things within a div:

div.center{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

I would like my unordered list to remain the centered in my div, but for each list item to be left justified below my other. Everything I have tried centers my list items to each other. What am I missing in my code?

7 5 2
3,870 points

1 Answer

0 votes

Solution :

To achieve what you want, you have to give the display: table; to your div as shown below.

div.center {
  margin-left: auto;
  margin-right: auto;
  display: table;
}
ul {
  text-align: left;
}

 OR

You can just add below code

ul {
  text-align: left;
}

 OR

It looks like the list is inheriting a text-align: center;, so you can try setting your div.listDiv or div.listDiv ul to the text-align: left;.

I know above provided solutions should help you in solving your problem

9 7 4
38,600 points

Related questions

0 votes
1 answer 81 views
81 views
Problem: I am new and learning, I need help, can anyone help by filling in the blanks? When CSS is coded in the body of the web page as an attribute of an HTML tag it is called _____?
asked Feb 21 maddi86 5.4k points
0 votes
1 answer 35 views
35 views
Problem : I have written two different types of sticky menus for two different pages. Following is the error Inside the anonymous function, use jquery to select the footer div. it has an id of 'footer'. Following is the code for both Menus. $(document).ready(function () { ... the bottom doesn't work because the second line of code var contentNav = $('.content-nav').offset().top; fires a error .
asked Nov 19, 2019 peterlaw 6.9k points
0 votes
1 answer 236 views
236 views
Problem : I am unable to solve my link problem. Can anybody help on to this to link the CSS and JS File? I am facing below error : Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/RetailSmart/jsp/ ... .js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/RetailSmart/jsp/Jquery/prettify.js
asked Jan 10 alecxe 7.5k points
0 votes
2 answers 29 views
29 views
Problem: What type of HTML list will automatically place a number in front of the items?
asked Apr 12 ArifulIslam 5.7k points