Выравнивание текста в CSS без перемещения текста - PullRequest
Новая
       0

Выравнивание текста в CSS без перемещения текста

1 голос
/ 26 марта 2020

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

body{
  background-color: gainsboro;
}

#header{
  background-color: rgb(80, 177, 241);
  background-size: 200px 300px;
}
#img{
  height: 10px;
  width: 8px;
  margin-bottom: 0px;
}

#header h1, p {
  text-align: center;
  padding: 0; 
  margin-bottom: 0px;
} 
#Container{

  margin: auto;
  background-color: darkgray;
}
#objective b{
  float: left;
  padding-left: 0px;
}

#objective {
  text-align: center;
  margin-left: 50px;
}
#skills b{
  float: left;
  padding-left: 0px;
}

#skills {
  margin-left: 50px;

}
#experience b{
  float: left;
  padding-left: 0px;
}

#experience {
  position: relative;
  text-align: center;
  padding-left: 50px;
}
#edu b{
  float: left;
  padding-left: 0px;
}
#edu {
  padding-left: 50px;
  margin-top: 50px;
}
#footer{
  text-align: center;
}
<!DOCTYPE html>
    <html>
      <head>
        <title>Moses Saygbe Resume</title>
        <link rel="stylesheet" href="style.css" type="text/css">
      </head>
      <body>
        <div id="Container">

      <div id="resume">

        <div id="header">
          <div id="img">
          <img src="Mosespic.jpg" alt="mp" style="widows: 100px;height: 125px;">
          </div>
          <h1>Moses Saygbe</h1>
          <p>800 s Main Street, StPaul, MN, 55109
            <br>
            Phone:763-273-6836
            <br>
            Email:saygbem@csp.com, WWW: http://www.mosessaygbe.com
          </p>
        </div>

        <!--This is where the list for the resume content goes.-->
        <div id="info">
          <p id="objective">
          <b>Objective</b>
          To graduate with my bachelors in Computer science and get a job right out of college.
          </p>
          <p id="skills"> 
          <b>Skills & Abilities</b>
          I know Python C++, and am learning HTML.
          <p id="experience">
          <b>Experience</b>
            <i>Connexus Energy</i>
            <br>
            <i>Jan 2019 – Sep 2019</i>
            <br>
            <ul>
              <li>Ensure quality technical support services are provided to employees in a timely manner</li>
              <li>Integrate PCs into the office environment, including the assembly, configuration, maintenance and follow- up</li>
              <li>Install and configure software and hardware for PCs and laptops</li>
              <li>Maintain copiers, printers, and fax machines</li>
              <li>Perform daily technical support health checks by</li> visually monitoring and reporting health status indicators to technical staff</li>
              <li>Cover the IT support phone line and provide first level support</li>
              <li>Process, record and prioritize all IT support requests as directed</li>
              <li>Monitor pool laptop activity and reconcile pool inventory to checked-out devices</li> 
            </ul>
            <i>Capital One</i>
            <br>
            <i>Oct 2018 – May 2019</i>
            <br>
            <ul>
              <li>Mentored/Trained New employees</li>
              <li>Led team-based meetings/training, Teaching new sales and technical techniques</li>
              <li>Servicied customer Bank accounts</li>
              <li>Provided App troubleshooting with customers servicing their accounts over the phone or online</li>
              <li>Provided personal financial counseling and build relationships with existing and new customers.</li> 
            </ul>
            <i>Best Buy</i>
            <br>
            <i>Aug 2013 – Mar 2018</i>
            <br>
            <ul>
              <li>Supported sales strategies in partnership with the Sales Manager to achieve operating results, growth objectives, and overall financial performance goals</li>
              <li>Ensured inventory and merchandising standards are maintained in-store area</li>
              <li>Trained New-hires on sale techniques and day to day Responsibilities</li>
              <li>Handled large amounts of money, and expensive merchandise</li>
            </ul>
            </p>
          <p id="edu">
          <b>Education</b>
            <i>Elk River High School</i>
            <br>
            <i>Class of 2012</i>
            <br>
            General studies
          <br>
          <br>
            <i>Concordia University, St. Paul</i>
            <br>
            <i>Class of 2021</i>
            <br>
            Bachelors of science
            </p>
        </div>
        <hr>
        <div id="footer">
          Moses Saygbe, Phone: 763-273-6836, Email:saygbem@csp.com
        </div>
      </div>
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 26 марта 2020

Насколько я мог судить, вы пытались настроить выравнивание всех жирных заголовков слева, выравнивание всего содержимого справа, а затем их выравнивание по вертикали. Который заканчивает тем, что был столом. Из-за первоначального чрезмерного использования <table> для макета у него довольно плохая репутация, но когда вы пытаетесь разложить стол, это идеально подходит для работы: 

body{
  background-color: gainsboro;
}

#header{
  background-color: rgb(80, 177, 241);
  background-size: 200px 300px;
}
#img{
  height: 10px;
  width: 8px;
  margin-bottom: 0px;
}

#header h1, p {
  text-align: center;
  padding: 0; 
  margin-bottom: 0px;
} 
#Container{

  margin: auto;
  background-color: darkgray;
}
table {
  margin-left: 50px; /* points or em would be cleaner */
}
th, td {
  padding-top: 1.5em;
}
th {
  text-align: left;
  vertical-align: top;
  min-width: 8em; /* tweak for left column sizing */
}
#footer{
  text-align: center;
}
<!DOCTYPE html>
    <html>
      <head>
        <title>Moses Saygbe Resume</title>
        <link rel="stylesheet" href="style.css" type="text/css">
      </head>
      <body>
        <div id="Container">

      <div id="resume">

        <div id="header">
          <div id="img">
          <img src="Mosespic.jpg" alt="mp" style="widows: 100px;height: 125px;">
          </div>
          <h1>Moses Saygbe</h1>
          <p>800 s Main Street, StPaul, MN, 55109
            <br>
            Phone:763-273-6836
            <br>
            Email:saygbem@csp.com, WWW: http://www.mosessaygbe.com
          </p>
        </div>

        <!--This is where the list for the resume content goes.-->
        <div id="info">
          <table>
            <tbody>
            <tr>
              <th>Objective</th>
              <td>To graduate with my bachelors in Computer science and get a job right out of college.</td>
            </tr>
            <tr>
              <th>Skills & Abilities</th>
              <td>I know Python C++, and am learning HTML.</td>
            </tr>
            <tr>
              <th>Experience</th>
              <td>
            <i>Connexus Energy</i>
            <br>
            <i>Jan 2019 – Sep 2019</i>
            <br>
            <ul>
              <li>Ensure quality technical support services are provided to employees in a timely manner</li>
              <li>Integrate PCs into the office environment, including the assembly, configuration, maintenance and follow- up</li>
              <li>Install and configure software and hardware for PCs and laptops</li>
              <li>Maintain copiers, printers, and fax machines</li>
              <li>Perform daily technical support health checks by</li> visually monitoring and reporting health status indicators to technical staff</li>
              <li>Cover the IT support phone line and provide first level support</li>
              <li>Process, record and prioritize all IT support requests as directed</li>
              <li>Monitor pool laptop activity and reconcile pool inventory to checked-out devices</li> 
            </ul>
            <i>Capital One</i>
            <br>
            <i>Oct 2018 – May 2019</i>
            <br>
            <ul>
              <li>Mentored/Trained New employees</li>
              <li>Led team-based meetings/training, Teaching new sales and technical techniques</li>
              <li>Servicied customer Bank accounts</li>
              <li>Provided App troubleshooting with customers servicing their accounts over the phone or online</li>
              <li>Provided personal financial counseling and build relationships with existing and new customers.</li> 
            </ul>
            <i>Best Buy</i>
            <br>
            <i>Aug 2013 – Mar 2018</i>
            <br>
            <ul>
              <li>Supported sales strategies in partnership with the Sales Manager to achieve operating results, growth objectives, and overall financial performance goals</li>
              <li>Ensured inventory and merchandising standards are maintained in-store area</li>
              <li>Trained New-hires on sale techniques and day to day Responsibilities</li>
              <li>Handled large amounts of money, and expensive merchandise</li>
            </ul>
          </dd>
          <dt>Education</dt>
          <dd>
            <i>Elk River High School</i>
            <br>
            <i>Class of 2012</i>
            <br>
            General studies
          <br>
          <br>
            <i>Concordia University, St. Paul</i>
            <br>
            <i>Class of 2021</i>
            <br>
            Bachelors of science
          </td>
          </tr>
          </tbody>
          </table>
        </div>
        <hr>
        <div id="footer">
          Moses Saygbe, Phone: 763-273-6836, Email:saygbem@csp.com
        </div>
      </div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...