Я пытаюсь сделать мои ссылки на моей странице выровненными по левому краю, но по центру страницы. Как мне это сделать? Я пробовал много способов и гуглил много, я не очень долго кодировал, и это становится настоящей борьбой.
Это мой 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");
}
2 ответа
Нравится? Я также немного почистил ваш 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>
Это пример решения. Я обернул ссылки в 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>
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].