Cant seem to get my text centered

Tell us what’s happening:
I cant get the information about Obamas life (with the ul and il) to go to the middle of the page. Anyone knows why it doesnt work?

Your code so far

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id="main">
  
  <h1 id="title">Barack Obama</h1>
  <h2>Former USA President</h2>
  <div id="img-div">
    <img id="image" 
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/President_Barack_Obama.jpg/1200px-President_Barack_Obama.jpg" alt="Barack Obama">
    <h3 id="img-caption">Former USA President</h3>
      
  <p id="tribute-info">Obama's life:</p>
   <ul>
     <li><strong> 1961-</strong> Barack Obama was born on August 4, in Honolulu Hawaii  </li>
     <li><strong> 1979-</strong> Obama went to the Occidental College in Los Angeles. </li>
     <li><strong> 1981-</strong> Obama made his first public speech. He transferred to Columbia University to major in political science.</li>
     <li><strong> 1983-</strong> Obama graduated from Columbia University with a Bachelor of Arts degree, magna cum laude. </li>
     <li><strong> 1988-</strong> Obama began to study at Harvard Law School.</li>
     <li><strong> 1990-</strong> On February 5, Obama became the first black president of the Harvard Law Review.</li>
     <li><strong> 1991-</strong> Obama graduated Harvard with his law degree and began work on his book Dreams of My Father.</li>
     <li><strong> 1996-</strong> Obama was elected to the Illinois Senate.</li>
     <li><strong> 2005-</strong> On January 5, Obama was sworn in as a U.S. Senator </li> 
     <li><strong> 2009-</strong> On January 20, Obama was sworn in as the 44th President of the United States. </li>
     <li><strong> 2017-</strong> January 20th marked Obama's last day in the office. </li> 
     </ul>

    <a id="tribute-link" href="https://nl.wikipedia.org/wiki/Barack_Obama" target="_blank"> Read More About Obama</a>
  
</div>

</div>

(HTML)

img{
  max-width:20%;
  display:block;
  margin:auto;
  border-radius:20px;
  box-shadow:20px;
}
h1{ 
text-align:center;
font-family:Sans-serif;
font-size:bold;
}
h2{ 
text-align:center;
font-style:italic;
font-size:15px;
margin-top:-1em;
}
#img-caption {
  font-style:italic;
  font-size:15px;
  margin-top:1em;
  text-align:center;
}
tribute-info p{
  text-align:center;
  font-size:20px;
  font-style:bold;
  text-color:black;
  font-weight:900;
}
#tribute-info ul{ 
position: absolute;
left: 50%;
transform: translatex(-50%);
line-height:30px;
}


  body { 
    background-image: url(https://cdn.britannica.com/79/4479-050-6EF87027/flag-Stars-and-Stripes-May-1-1795.jpg); 
  }

(CSS)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

1 Like

Hello @Nqek. Can you please give the CodePen URL? Also, can you clearly explain your question? Thanks.

https://codepen.io/Nqek/pen/Exyjjgd hope this works. I want to put the parts of Obamas life in the middle of page, but that doesnt work. It doesnt wanna move to the middle

1 Like

Hey @Nqek! Found the solution!
Your CSS selector was wrong:
#tribute-info ul {}

That’s wrong because the list is not nested inside the #tribute-info.

I changed the selector to:
ul li {}
Whenever you want changes to the text in a list, you need to target the list items and not the list wrapper.

Then, I removed the existing positioning CSS codes and then added the text-align: center; property. This made the text centered, but the bullet points still exists in the same place. So, I added list-style-type: none; so that the bullet points are hidden.

Final Result:

Hope this helps you!

1 Like

Hello there,

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thank you so much :smiley: one more question, is there a way to put all the dates under each other? because now it looks kinda messy

But you wanted it to be centered! :grinning:

text-align:center is rarely a good idea. It works well for small pieces of text like headlines, also on birthday cards and wedding invitations. Longer text should never be centered. If you want it text-align:left without the text stretching all the way from one side of the page to the other, you’ll need to give the container (#img-div) a max-width and center it with margin:0 auto.

i want the dates to be like here: https://codepen.io/freeCodeCamp/full/zNqgVx is that possible or is the text too long for that? thanks for the help anyway :DD

The example project is using max-width and auto margin. Here is the CSS.

ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 16px 0;
}

If you add a container around the ul you can also use text-align and display: inline-block. Edit: This avoids using a width, but that also will not wrap the text, so if that is what you do want use a width instead.

.container {
  text-align: center;
}

ul {
  display: inline-block;
  text-align: left;
  list-style: none;
}
1 Like

Hey @lasjorg. The solution you provided is far more better than text-align: center;. I would suggest @Nqek to use it. :grinning:

thank you so much :smiley: that solved it