CODE PEN PROJECT第一次

时间:2016-12-08 04:34:43

标签: html css

我正试图将我的图像和我的订单列表中心,但我很难让它工作可以有人请给我一个提示我试过CSS在中心对齐它没有用。我将放置一个链接,以便人们可以看到我的代码并发布代码。

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>

4 个答案:

答案 0 :(得分:0)

添加body{text-align:center;},因为我们还必须在父级中text-align:center;,以便内容集中对齐

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>

答案 1 :(得分:0)

我认为问题在于它被困在<a>标签内,并且您只是选择要移动的图像,但这会留下链接,因此计算机会说:“那不会工作“所以它忽略了CSS。我建议做的是说body {text-align: center;},然后在你想要对齐的文本周围包裹div并在CSS中说:div {text-align:left;}。这样可行,因为CSS 级联div {text-align: left;}body {text-align}向下,它将覆盖第一个,div将在左侧对齐。

答案 2 :(得分:0)

text-align:center; 添加到html和body标签,工作正常

  

html,body {text-align:center; }

&#13;
&#13;
.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;
  }
&#13;
<!-- 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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

据我了解,您需要将图像居中并仅列出项目。这样对吗? 如果没有,只需在您的css中将text-align: center添加到h1,h2标记,您的标题也会居中。

.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>