Странное позиционирование изображения (HTML, CSS, Bootstrap) - PullRequest
0 голосов
/ 06 мая 2018

Я только начал учиться через freecodecamp несколько дней назад. Я попал в свой первый проект, где мне нужно было создать страницу дани для всех в мире. Все, что нужно было включить, это их изображение, текст и ссылку, по которой пользователи отправлялись на внешний сайт.

Мое изображение ведет себя странно. В некоторых взглядах все выглядит красиво и по центру. В других это огромно и далеко вправо. Я не уверен, что я могу сделать. Я смотрел вокруг и пробовал разные вещи, но ничего не получается. Ниже приведены 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>

1 Ответ

0 голосов
/ 06 мая 2018

Просто запишите ширину в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...