• Register
0 votes
48 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

Please log in or register to answer this question.

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 13 views
13 views
Problem: How can I change a css class of an HTML element in response to an event onClickusing javascript?
asked Feb 12 sasha 8.4k points
0 votes
1 answer 18 views
18 views
Problem Hey, I have an in wrapping my icon within an <a> tag Can you please help me to change the color of the font-awesome icon to black. This will be great for me.
asked Jan 14 chris jordan 2.4k points
0 votes
1 answer 12 views
12 views
I am new to this. I was doing that but I got into some problems.
asked Nov 3, 2020 TeamScript 13.5k points
0 votes
1 answer 240 views
240 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, 2020 maddi86 5.4k points
0 votes
1 answer 57 views
57 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
2 answers 70 views
70 views
Problem: What type of HTML list will automatically place a number in front of the items?
asked Apr 12, 2020 ArifulIslam 7.5k points
0 votes
1 answer 6 views
6 views
Problem: Say I have an html page: <body> <div id="header"> <h1>Header title</h1> header content (one or multiple lines) </div> <div id="content"> bla bla bla </div> </body> and the corresponding css: #header { height: 150px; } The header section is of fixed height, but the content of ... perfectly | spans over three lines) ----------------------------- bla bla bla How can this be done in the CSS?
asked Feb 15 sasha 8.4k points
0 votes
0 answers 26 views
0 votes
1 answer 439 views
439 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, 2020 alecxe 7.5k points
1 vote
1 answer 18 views
18 views
How I can put in the same div in the background two images with css? <div class="testimonial carousel-item active"> <img class="img-testimonial" src="assets/image-tanya.jpg" alt=""> <div class="text-testimonial"> <p>"I've been interested in coding for ... .svg); background-repeat: no-repeat; background-position: right top; width: 1000px; height: 800px; position: relative; display: inline-block; }
asked Sep 13, 2020 Marivoke 530 points