First challenge-tribute page, can't center the ul and li tags

1

Hi,everyone! I’ve already done this but there is something to do, can’t center some elements:ul and li tags and the quotation. Please help me, I suppose I have to add a div element above ul and some properties but I can’t figure out which one?

Tried to add to ul (without adding div) display:block; margin:0 auto and added text-center class to ul, didn’t help,I read about these ways here on the forum.

Here’s my tribute page:http://prntscr.com/gr0rfu
Here’s a code:

 <h3 class="text-center">Here's a timeline of Nikola Tesla's life:</h3>
     <ul>
      <li><strong>1856</strong> - Born in Smiljan,Austrian Empire</li>
       <li><strong>1875</strong> - Tesla Enrolls At Austrian Polytechnic</li>
       
       </ul>
<p class="text-center"style="margin-top:20px;">&quot;I don't care that they stole my idea... I care that they don't have any of their own&quot;
    </p>
     <p class="text-center" style="color:#000; font-size:15px;">― Nikola Tesla</p>
2

try adding “text-align:center” into its style attribute

3

@Nikita I’m not on that project yet, but if I may ask, why do you want the bullet points to be centered? I think they look fine the way they are now, left-justified. Centering bullet points always looks strange to me, if I’m understanding the centering you’re trying to do.

4

Thank you for your answer. But I tried to do that like the Quincy Larson tribute page, so I thought it was vital to do as he did or it’s not necessary? I"m worry about to do everything properly. And by the way I think the quotation should be centered too.

5

It didn’t work when I added it to ul.

6

Ok then in the CSS file try adding this code if you still want to try it

ul {
     text-align: center;
}
7
8

That looks better but if you want to get rid of those bullets you can use this code instead of the other one

ul {
     text-align: center
     list-style-type: none;
]

Let me know if it doesn’t work

1 Like
10

Thank you for your help,appreciate it. But it still doesn’t work.

11

If I understand correctly, you want to emulate the look of the example project exactly, i.e. have a normal left-aligned list with bullet points, centred within the width of the page.

You can do this by wrapping the ul within a div, then apply CSS to centre the div. If you try to style the ul directly, your list ends up looking weird.

Maybe there is a Bootstrap-specific way of doing this but I’ve given up on Bootstrap for now so can’t advise. What I’d do is give the following style to the div:

margin: 0 auto;
max-width: 30em; /* obviously could be any value, you need to experiment */
1 Like
12

Make a div inside ul and li and add a id=“firstdiv” into that div of course and put the following :

#firstdiv{
text-align : center ; /* To center an ul /
list-style-type: none; / To get rid away of bullet points */
}

if that does not work, try add margin: 0 auto;

13

I used margin: 0, auto;

ul{
	font-family: Calibri, Arial;
	font-size: 15px;	
	display: table;
text-align: left;
	margin: 0 auto;
}
1 Like