Отцентрируйте мой текст, но держите влево выравнивание?

Question

Я пытаюсь сделать мои ссылки на моей странице выровненными по левому краю, но по центру страницы. Как мне это сделать? Я пробовал много способов и гуглил много, я не очень долго кодировал, и это становится настоящей борьбой.

Мой сайт

Это мой HTML-код

    <!DOCTYPE html>
<html>
 <head>
 <Title> Conspiracy Theories </Title>
  </head>
   <link href="mystyle.css" type="text/css" rel="stylesheet">
    <Body>
     <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" />
      <a <link href="WP1.html" type="text/html" style="text-decoration:none" rel="html"> EmDrive is being tested on the X-37B</a></li>
      <a <link href="WP2.html" type="text/html" style="text-decoration:none" rel="html"> Diesel Submarines</a></li>
      <a <link href="WP3.html" type="text/html" style="text-decoration:none" rel="html">Lethal B-21 vs. B-2 Stealth Bomber</a></li>
      <a <link href="WP4.html" type="text/html" style="text-decoration:none" rel="html"> Air Force Wants a New Fighter</a></li>
      <a <link href="WP5.html" type="text/html" style="text-decoration:none" rel="html"> King Tiger Tank : Super Weapon or Super Myth?</a></li>
      <a <link href="WP6.html" type="text/html" style="text-decoration:none" rel="html"> Ground Combat Vehicle (GCV)</a></li>
      <a <link href="WP7.html" type="text/html" style="text-decoration:none" rel="html"> 3 service men killed</a></li>
      <a <link href="WP8.html" type="text/html" style="text-decoration:none" rel="html"> US intercepts 2 Russian bombers</a></li>
      <a <link href="WP9.html" type="text/html" style="text-decoration:none" rel="html"> World reacts to US strikes</a></li>
    </div>
   </div>
  </Body>
 <h1>     </h1>

CSS

img {
  padding-bottom: 30px;
  display: block;
  margin: auto;
  width: 10%;
}

a {
  line-height: 1.7em;
  display:block;
  margin-left: auto;
  text-align: center;
  color: black;
}

body {
   background-image: 
   url("https://presentations.inxpo.com/SharedContent/VX/images/background-
   shell.jpg");
}

html css

2

Mr_HaleYa 24 Апр 2017 в 23:25

Answer 1

Нравится? Я также немного почистил ваш html. Вы можете поиграть с шириной ul.container, это сместит «список» влево или вправо.

img {
  padding-bottom: 30px;
  display: block;
  margin: auto;
  width: 10%;
}

a {
  line-height: 1.7em;
  display: block;
  margin-left: auto;
  color: black;
  text-decoration: none;
}

ul.container {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  list-style-type: none;
  padding: 0;
}

main {
  background-image: url("https://presentations.inxpo.com/SharedContent/VX/images/background-
 shell.jpg");

}

<!DOCTYPE html>
<html>

<head>
  <Title> Conspiracy Theories </Title>
  <link href="mystyle.css" type="text/css" rel="stylesheet">
</head>


<main>
  <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" />

  <ul class="container">
    <li><a href="WP1.html" type="text/html"> EmDrive is being tested on the X-37B</a></li>
    <li><a href="WP2.html" type="text/html"> Diesel Submarines</a></li>
    <li><a href="WP3.html" type="text/html"> Lethal B-21 vs. B-2 Stealth Bomber</a></li>
    <li><a href="WP4.html" type="text/html"> Air Force Wants a New Fighter</a></li>
    <li><a href="WP5.html" type="text/html"> King Tiger Tank : Super Weapon or Super Myth?</a></li>
    <li><a href="WP6.html" type="text/html"> Ground Combat Vehicle (GCV)</a></li>
    <li><a href="WP7.html" type="text/html"> 3 service men killed</a></li>
    <li><a href="WP8.html" type="text/html"> US intercepts 2 Russian bombers</a></li>
    <li><a href="WP9.html" type="text/html"> World reacts to US strikes</a></li>

  </ul>

</main>
<h1> </h1>

0

blackandorangecat 24 Апр 2017 в 20:45

Answer 2

Это пример решения. Я обернул ссылки в div, чтобы сделать эту работу. Я надеюсь, что это помогает

body {
    background-image: url(https://presentations.inxpo.com/SharedContent/VX/images/background-shell.jpg);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
img {
    padding-bottom: 30px;
    display: block;
    margin: auto;
    width: 10%;
}
body > div {
	text-align: left;
    margin: 0 auto;
}
a {
    line-height: 1.7em;
    display: block;
    color: black;
}

   <!DOCTYPE html>
<html>
 <head>
 <Title> Conspiracy Theories </Title>
  </head>
   <link href="mystyle.css" type="text/css" rel="stylesheet">
    <Body>
     <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" />
	 <div>
      <a link href="WP1.html" type="text/html" style="text-decoration:none" rel="html"> EmDrive is being tested on the X-37B</a>
      <a link href="WP2.html" type="text/html" style="text-decoration:none" rel="html"> Diesel Submarines</a>
      <a link href="WP3.html" type="text/html" style="text-decoration:none" rel="html">Lethal B-21 vs. B-2 Stealth Bomber</a>
      <a link href="WP4.html" type="text/html" style="text-decoration:none" rel="html"> Air Force Wants a New Fighter</a>
      <a link href="WP5.html" type="text/html" style="text-decoration:none" rel="html"> King Tiger Tank : Super Weapon or Super Myth?</a>
      <a link href="WP6.html" type="text/html" style="text-decoration:none" rel="html"> Ground Combat Vehicle (GCV)</a>
      <a link href="WP7.html" type="text/html" style="text-decoration:none" rel="html"> 3 service men killed</a>
      <a link href="WP8.html" type="text/html" style="text-decoration:none" rel="html"> US intercepts 2 Russian bombers</a>
      <a link href="WP9.html" type="text/html" style="text-decoration:none" rel="html"> World reacts to US strikes</a>
    </div>
  </Body>
 </html>

0

blecaf 24 Апр 2017 в 21:09

Отцентрируйте мой текст, но держите влево выравнивание?

2 ответа

Похожие вопросы

Новые вопросы

html