-3

I am trying to center my image and my order list, but I am having a hard time making it work can someone please give me a tip I tried CSS to align it in the center didn't work. I will place a link so people can see my code and post the code as well.

http://codepen.io/RomingArt/pen/RojXgq

.smaller-image{width:300px
               }
h1 {font-family: Lobster;}
.thick-border{border-color:#14A5A5;
              border-width:3px;
              border-style:solid;
              border-radius:0px;
              text-align:center;}
<!-- This is my first tribute page, and I am not sure how to put the picture in the middle also I wanted to put together the list in the middle tried with div did not work hopefully someone will guide me or fix the code so I can learn.-->
<h1 class=" text-primary text-center">Booker T. Washigton</h1>
<h2 class="text-center text-primary"> April 5, 1856-November 14,1915.</h2>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<a href="https://en.wikipedia.org/wiki/Booker_T._Washington" target="blank">
   <img class="smaller-image thick-border"src=http://images.amcnetworks.com/wetv.com/wp-content/uploads/2014/01/bhm_quotes_bwashington.jpg> </a>

<h3> The life of a man who took each opporutnity to learn.</h3>
  <ol>
  <li>1856 – April 5 – Booker T. Washington is born a slave on the Burroughs’ Plantation. </li>
  <li>1861 – Washington’s name appears on Burroughs’ property inventory. His value is $400.00.
</li> 
  <li>1865 – 1871 – Washington works in the salt and coal mines in Malden while attending school, for the first time, in the evenings.</li>
  <li>1872 – Washington leaves his home to attend the Hampton Institute.</li>
  <li>1875 – Washington graduates from the Hampton Institute with honors.</li>
  <li>1875 – 1877 – Washington teaches school, in his hometown of Malden, WV, while helping his brothers (John, and adopted brother James) pay their tuition for the Hampton Institute.</li>
  <li>1881 – July 4 – At age 25, Washington opens the Tuskegee Institute in an old church.</li>
  <li>1887 – Olivia Washington gives birth to Washington’s first son, Booker T. Washington Jr.</li>
  <li>1893 – Washington marries Margaret James Murray who had been Lady Principal of Tuskegee Institute for two years.</li>
  <li>1901 – March – Washington’s most successful autobiography, Up from Slavery, is published.</li>
  <li>1909 – Du Bois helps found the National Association for the Advancement of Colored People (NAACP).</li>
  <li>1915 – November 14 – Washington dies at home in Tuskegee, Alabama.</li>
</ol> 
<p> In order to learn more about the life of Booker T. Washigton click on image to learn about a great man.</p>
Safal Pillai
  • 1,567
  • 1
  • 16
  • 31
RomingArt
  • 1
  • 1

4 Answers4

0

Add body{text-align:center;} as we also have to text-align:center; in the parent so that the content will get aligned centrally

body{
  text-align:center;
  }

.smaller-image{width:300px
               }
h1 {font-family: Lobster;}
.thick-border{border-color:#14A5A5;
              border-width:3px;
              border-style:solid;
              border-radius:0px;
              text-align:center;}
<!-- This is my first tribute page, and I am not sure how to put the picture in the middle also I wanted to put together the list in the middle tried with div did not work hopefully someone will guide me or fix the code so I can learn.-->
<h1 class=" text-primary text-center">Booker T. Washigton</h1>
<h2 class="text-center text-primary"> April 5, 1856-November 14,1915.</h2>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<a href="https://en.wikipedia.org/wiki/Booker_T._Washington" target="blank">
   <img class="smaller-image thick-border"src=http://images.amcnetworks.com/wetv.com/wp-content/uploads/2014/01/bhm_quotes_bwashington.jpg> </a>

<h3> The life of a man who took each opporutnity to learn.</h3>
  <ol>
  <li>1856 – April 5 – Booker T. Washington is born a slave on the Burroughs’ Plantation. </li>
  <li>1861 – Washington’s name appears on Burroughs’ property inventory. His value is $400.00.
</li> 
  <li>1865 – 1871 – Washington works in the salt and coal mines in Malden while attending school, for the first time, in the evenings.</li>
  <li>1872 – Washington leaves his home to attend the Hampton Institute.</li>
  <li>1875 – Washington graduates from the Hampton Institute with honors.</li>
  <li>1875 – 1877 – Washington teaches school, in his hometown of Malden, WV, while helping his brothers (John, and adopted brother James) pay their tuition for the Hampton Institute.</li>
  <li>1881 – July 4 – At age 25, Washington opens the Tuskegee Institute in an old church.</li>
  <li>1887 – Olivia Washington gives birth to Washington’s first son, Booker T. Washington Jr.</li>
  <li>1893 – Washington marries Margaret James Murray who had been Lady Principal of Tuskegee Institute for two years.</li>
  <li>1901 – March – Washington’s most successful autobiography, Up from Slavery, is published.</li>
  <li>1909 – Du Bois helps found the National Association for the Advancement of Colored People (NAACP).</li>
  <li>1915 – November 14 – Washington dies at home in Tuskegee, Alabama.</li>
</ol> 
<p> In order to learn more about the life of Booker T. Washigton click on image to learn about a great man.</p>
jafarbtech
  • 6,842
  • 1
  • 36
  • 55
0

I think the problem is that it is trapped inside the <a> tag, and you are only selecting the image to move over, but that would leave the link behind, so the computer says: "that won't work" so it ignores the CSS. What I recommend doing is saying body {text-align: center;} and then wrapping a div around the text that you want to be aligned left and saying in the CSS: div {text-align:left;}. This will work because CSS is cascading and the div {text-align: left;} is down from the body {text-align} and it will override the first one and the div will be aligned on the left.

ca1c
  • 1,111
  • 10
  • 23
0

Add text-align:center; to html and body tag it,s working fine

html,body{ text-align:center; }

.smaller-image{width:300px
               }
h1 {font-family: Lobster;}
.thick-border{border-color:#14A5A5;
              border-width:3px;
              border-style:solid;
              border-radius:0px;
              text-align:center;
}
html,body{
   text-align:center;
  }
<!-- This is my first tribute page, and I am not sure how to put the picture in the middle also I wanted to put together the list in the middle tried with div did not work hopefully someone will guide me or fix the code so I can learn.-->
<h1 class=" text-primary text-center">Booker T. Washigton</h1>
<h2 class="text-center text-primary"> April 5, 1856-November 14,1915.</h2>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<a href="https://en.wikipedia.org/wiki/Booker_T._Washington" target="blank">
   <img class="smaller-image thick-border"src=http://images.amcnetworks.com/wetv.com/wp-content/uploads/2014/01/bhm_quotes_bwashington.jpg> </a>

<h3> The life of a man who took each opporutnity to learn.</h3>
  <ol>
  <li>1856 – April 5 – Booker T. Washington is born a slave on the Burroughs’ Plantation. </li>
  <li>1861 – Washington’s name appears on Burroughs’ property inventory. His value is $400.00.
</li> 
  <li>1865 – 1871 – Washington works in the salt and coal mines in Malden while attending school, for the first time, in the evenings.</li>
  <li>1872 – Washington leaves his home to attend the Hampton Institute.</li>
  <li>1875 – Washington graduates from the Hampton Institute with honors.</li>
  <li>1875 – 1877 – Washington teaches school, in his hometown of Malden, WV, while helping his brothers (John, and adopted brother James) pay their tuition for the Hampton Institute.</li>
  <li>1881 – July 4 – At age 25, Washington opens the Tuskegee Institute in an old church.</li>
  <li>1887 – Olivia Washington gives birth to Washington’s first son, Booker T. Washington Jr.</li>
  <li>1893 – Washington marries Margaret James Murray who had been Lady Principal of Tuskegee Institute for two years.</li>
  <li>1901 – March – Washington’s most successful autobiography, Up from Slavery, is published.</li>
  <li>1909 – Du Bois helps found the National Association for the Advancement of Colored People (NAACP).</li>
  <li>1915 – November 14 – Washington dies at home in Tuskegee, Alabama.</li>
</ol> 
<p> In order to learn more about the life of Booker T. Washigton click on image to learn about a great man.</p>
ADH - THE TECHIE GUY
  • 4,125
  • 3
  • 31
  • 54
0

As I understand, you need to center your image and list items only. Is it right? If not, just add text-align: center to h1,h2 tags in your css and your title will be centered also.

.wrapper {
  text-align: center;
}

.content {
  text-align: left;
  margin: 0 auto;
  width: 500px;
}

h3 {
  text-align: center;
}

.inside {
  margin: 0 auto;
}
.smaller-image{width:300px
               }
h1 {font-family: Lobster;}
.thick-border{border-color:#14A5A5;
              border-width:3px;
              border-style:solid;
              border-radius:0px;
              text-align:center;}
<!-- This is my first tribute page, and I am not sure how to put the picture in the middle also I wanted to put together the list in the middle tried with div did not work hopefully someone will guide me or fix the code so I can learn.-->

<h1 class=" text-primary text-center">Booker T. Washigton</h1>
<h2 class="text-center text-primary"> April 5, 1856-November 14,1915.</h2>
<div class="wrapper">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<a href="https://en.wikipedia.org/wiki/Booker_T._Washington" target="blank">
   <img class="smaller-image thick-border"src=http://images.amcnetworks.com/wetv.com/wp-content/uploads/2014/01/bhm_quotes_bwashington.jpg> </a></div>
<div class="content">
<div class="inside">
<h3> The life of a man who took each opporutnity to learn.</h3>
  <ol>
  <li>1856 – April 5 – Booker T. Washington is born a slave on the Burroughs’ Plantation. </li>
  <li>1861 – Washington’s name appears on Burroughs’ property inventory. His value is $400.00.
</li> 
  <li>1865 – 1871 – Washington works in the salt and coal mines in Malden while attending school, for the first time, in the evenings.</li>
  <li>1872 – Washington leaves his home to attend the Hampton Institute.</li>
  <li>1875 – Washington graduates from the Hampton Institute with honors.</li>
  <li>1875 – 1877 – Washington teaches school, in his hometown of Malden, WV, while helping his brothers (John, and adopted brother James) pay their tuition for the Hampton Institute.</li>
  <li>1881 – July 4 – At age 25, Washington opens the Tuskegee Institute in an old church.</li>
  <li>1887 – Olivia Washington gives birth to Washington’s first son, Booker T. Washington Jr.</li>
  <li>1893 – Washington marries Margaret James Murray who had been Lady Principal of Tuskegee Institute for two years.</li>
  <li>1901 – March – Washington’s most successful autobiography, Up from Slavery, is published.</li>
  <li>1909 – Du Bois helps found the National Association for the Advancement of Colored People (NAACP).</li>
  <li>1915 – November 14 – Washington dies at home in Tuskegee, Alabama.</li>
</ol> 
<p> In order to learn more about the life of Booker T. Washigton click on image to learn about a great man.</p>
  </div>
</div>
Walt
  • 77
  • 1
  • 9