Hello I’m Shekinah
How can I align the bullet points with the text, to the center on css?
hi Shekinah, welcome to the forum.
For centering: you should be able to do this if you are using a flex display on the container of these bullets or by setting the width of the container to 50% (or a number less than 100) and the margin-left and margin-right to auto I believe.
if this doesn’t work for you, please put your code in a place where we can view it to see what else may be needed. (I suggest codepen)
Thank you, I am happy to be here!! The flexbox allowed me to adjust the bullets and info in a way that center aligns it, however it still doesn’t look like. And Thank you, I am happy to be here!!
Here is my HTML AND CSS code:
<div id="tribute-info">
<h2 class="time-line">
Here's a time line of Dr. Borlaug's life:
</h2>
<div class="info_t">
<ul >
<li >
<b>1914</b> - Born in Cresco, Iowa
</li>
<li>
<b>1933</b> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
</li>
<li>
<b>1935</b> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
<li><b>1937</b> - Finishes university and takes a job in the US Forestry Service
</li>
<li>
<b>1938</b> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.
</li>
<li>
<b>1941</b> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.
</li>
<li><b>1942</b> - Receives a Ph.D. in Genetics and Plant Pathology</li>
</ul>
</div>
<p>"<i>Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress.</i>"</p>
<p><i>-- Indian Prime Minister Manmohan Singh</i></p>
</div>
<h3 class="time-line">
If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Norman_Borlaug" id="tribute-link">Wikipedia</a> entry.
</h3>
</main>
</body>
</html>
CSS:
#image{
width: 80%;
display: block;
margin: 0 auto;
height: auto;
}
#img-caption{
text-align: center;
}
.time-line, p{
text-align: center;
}
#title{
text-align: center;
}
#main{
border: 3px black solid;
background-color: #DCDCDC;
}
.info_t{
display: flex;
margin: 0 150px;
padding: 0px
}"
I want it to look like the one in the Tribute project
However its still lacking
hello and welcome to fcc forum 
when you need to ask for help you can simply create a post from “help button” for this forum
for now, please share this step / exercise url as well, happy coding
it looks like you code is cut off. Try to include all the code (from the first line to the last line). Same for the css.
You should also include a link to the project so we can test quickly.
I’ve edited your code 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 (').
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"/>
<meta charset="UTF-8" />
<title>Tribute Page</title>
</head>
<body>
<main id="main"class="background_m">
<div id="title">
<h1>Dr. Norman Borlaug</h1>
<p>The man who saved a billion lives</p>
</div>
<div id="img-div">
<figure>
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" id="image">
<figcaption id="img-caption">
Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.
</figcaption>
</figure>
</div>
<div id="tribute-info">
<h2 class="time-line">
Here's a time line of Dr. Borlaug's life:
</h2>
<div class="info_t">
<ul >
<li >
<b>1914</b> - Born in Cresco, Iowa
</li>
<li>
<b>1933</b> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"
</li>
<li>
<b>1935</b> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
<li><b>1937</b> - Finishes university and takes a job in the US Forestry Service
</li>
<li>
<b>1938</b> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.
</li>
<li>
<b>1941</b> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.
</li>
<li><b>1942</b> - Receives a Ph.D. in Genetics and Plant Pathology</li>
</ul>
</div>
<p>"<i>Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress.</i>"</p>
<p><i>-- Indian Prime Minister Manmohan Singh</i></p>
</div>
<h3 class="time-line">
If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Norman_Borlaug" id="tribute-link" target="_blank" >Wikipedia</a> entry.
</h3>
</main>
</body>
</html>
CSS:
#image{
max-width: 100%;
display: block;
margin: 0 auto;
height: auto;
}
#img-caption{
text-align: center;
}
.time-line, p{
text-align: center;
}
#title{
text-align: center;
}
#main{
border: 3px black solid;
background-color: #DCDCDC;
}
.info_t{
display: flex;
margin: 0 150px;
padding: 0px
}
Here is all of my code. I don’t know how to get the link, but I git made a Github page for it, which is here: Tribute Page(My Own)
The bullet points and info can be aligned to the center, but it just doesn’t compare to the one in the example of the project.
Thank You, I didn’t know that
As already suggested, give the container the ul is inside, or the ul itself, a max-width and a left/right auto margin.
1 Like