html - 奇怪的图像定位(HTML、CSS、Bootstrap)

Question

我几天前才开始通过 freecodecamp 学习。我完成了我的第一个元素，我必须为世界上的任何人创建一个致敬页面。它所必须包括的只是一张他们的照片、一些文本和一个将用户引导至外部站点的链接。

我的头像很奇怪。在某些 View 中，它看起来很漂亮并且居中。在其他情况下，它很大并且在右边很远。我不确定我能做什么。我环顾四周并尝试了不同的方法，但似乎没有任何效果。下面是我写的 HTML 和 CSS:

#elonRocket {
  border-radius: 80%;
  border-style: solid;
  border-width: 10px;
}

h1 {
  font-size: 64px;
}

.mainInfo {
  text-align: center;
  margin: 5;
}

.entryTitle {
  padding-top: 100px;
  font-weight: bold;
}
    
.mainEntry {
  background-color: #acb2b7;
  border-style: dashed;
}

#closing {
  text-align: center;
  padding-top: 150px;
}

<div class="container">
  <div class="jumbotron">
    <div class="col-xs-12">
      <div class="page-header">
        <h1 class="text-center page-header" style="font-family: Audimat"><strong>Elon Musk</strong></h1>
      </div>
      <h2 class="text-center"><em>beating the odds</em></h2><br>
      <p style="text-align:center"><img src="http://fossbytes.com/wp-content/uploads/2016/01/space-x-elon-musk-.jpg" id="elonRocket" alt="Elon Musk standing in front of Falcon 9"></p>
      <div class="mainInfo">
        <h2 class="entryTitle">Who is he?</h2>
        <p class="mainEntry">Elon Reeve Musk (born June 28, 1971) is a South African-born American entrepreneur and businessman who founded X.com in 1999 (which later became PayPal), SpaceX in 2002 and Tesla Motors in 2003. Musk became a multimillionaire in his late 20s
          when he sold his start-up company, Zip2, to a division of Compaq Computers. Musk made headlines in May 2012, when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station. He bolstered his portfolio
          with the purchase of SolarCity in 2016, and cemented his standing as a leader of industry by taking on an advisory role in the early days of President Donald Trump's administration.</p>
        <h2 class="entryTitle">What was his childhood like?</h2>
        <p class="mainEntry">During his childhood he was an avid reader. At age 10, he developed an interest in computing with the Commodore VIC-20. He taught himself computer programming at the age of 12, sold the code of a BASIC-based video game he created called Blastar,
          to a magazine called PC and Office Technology, for approximately $500. A web version of the game is available online. His childhood reading included Isaac Asimov's Foundation series from which he drew the lesson that "you should try to take
          the set of actions that are likely to prolong civilization, minimize the probability of a dark age and reduce the length of a dark age if there is one."</p>
        <h2 class="entryTitle">Where is he headed?</h2>
        <p class="mainEntry">Elon Musk has a lot of life goals, far more than must of us could even fathom. He has made some of his goals public, but I feel as though there is a lot more going on in his intelligent brain.
      </div>
      <div class="mainEntry">
        <ul>
          <li>Create stunning solar roofs with seamlessly integrated battery storage</li>
          <li>Develop a self-driving capability that is 10X safer than manual via massive fleet learning</li>
          <li>Enable your car to make money for you when you aren’t using it</li>
          <li>Travel to mars</li>
          <li>Colonize Mars</li>

          </p>

      </div>

      <h3 id="closing">If you'd like to know more, please feel free to visit the link <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Here!</a></h3>

Answer 1

只需将宽度写入elonmusk 标识符即可。

#elonRocket {
  border-radius: 80%;
  border-style: solid;
  border-width: 10px;
  width:50%; /* put here with what are you want */
}

h1 {
  font-size: 64px;
}

.mainInfo {
  text-align: center;
  margin: 5;
}

.entryTitle {
  padding-top: 100px;
  font-weight: bold;
}
    
.mainEntry {
  background-color: #acb2b7;
  border-style: dashed;
}

#closing {
  text-align: center;
  padding-top: 150px;
}

<div class="container">
  <div class="jumbotron">
    <div class="col-xs-12">
      <div class="page-header">
        <h1 class="text-center page-header" style="font-family: Audimat"><strong>Elon Musk</strong></h1>
      </div>
      <h2 class="text-center"><em>beating the odds</em></h2><br>
      <p style="text-align:center"><img src="http://fossbytes.com/wp-content/uploads/2016/01/space-x-elon-musk-.jpg" id="elonRocket" alt="Elon Musk standing in front of Falcon 9"></p>
      <div class="mainInfo">
        <h2 class="entryTitle">Who is he?</h2>
        <p class="mainEntry">Elon Reeve Musk (born June 28, 1971) is a South African-born American entrepreneur and businessman who founded X.com in 1999 (which later became PayPal), SpaceX in 2002 and Tesla Motors in 2003. Musk became a multimillionaire in his late 20s
          when he sold his start-up company, Zip2, to a division of Compaq Computers. Musk made headlines in May 2012, when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station. He bolstered his portfolio
          with the purchase of SolarCity in 2016, and cemented his standing as a leader of industry by taking on an advisory role in the early days of President Donald Trump's administration.</p>
        <h2 class="entryTitle">What was his childhood like?</h2>
        <p class="mainEntry">During his childhood he was an avid reader. At age 10, he developed an interest in computing with the Commodore VIC-20. He taught himself computer programming at the age of 12, sold the code of a BASIC-based video game he created called Blastar,
          to a magazine called PC and Office Technology, for approximately $500. A web version of the game is available online. His childhood reading included Isaac Asimov's Foundation series from which he drew the lesson that "you should try to take
          the set of actions that are likely to prolong civilization, minimize the probability of a dark age and reduce the length of a dark age if there is one."</p>
        <h2 class="entryTitle">Where is he headed?</h2>
        <p class="mainEntry">Elon Musk has a lot of life goals, far more than must of us could even fathom. He has made some of his goals public, but I feel as though there is a lot more going on in his intelligent brain.
      </div>
      <div class="mainEntry">
        <ul>
          <li>Create stunning solar roofs with seamlessly integrated battery storage</li>
          <li>Develop a self-driving capability that is 10X safer than manual via massive fleet learning</li>
          <li>Enable your car to make money for you when you aren’t using it</li>
          <li>Travel to mars</li>
          <li>Colonize Mars</li>

          </p>

      </div>

      <h3 id="closing">If you'd like to know more, please feel free to visit the link <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Here!</a></h3>