居中文本，但保持左对齐？

Question

居中文本，但保持左对齐？

5

我尝试让我的页面链接左对齐，但在页面中央居中显示。我该怎么做？我已经尝试了很多方法并进行了更多的谷歌搜索，但是我编码时间不长，这变成了一个真正的挑战。

这是我的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");
}

- Mr_HaleYa

你能再解释一下你想让它看起来像什么吗？ - jtmingus

你的 CSS 链接必须放在 <head> </head> 标签内，同时你的链接写法有误，请按照以下方式编写代码：<a href="url">链接文本</a>。 - mlegg

4个回答

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>

- blecaf

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>

- blackandorangecat

0

#app {
  /* step 2: center the text container in a flex box */
  display: flex;
  justify-content: center;
}

/* step 3: be stylish */
#app, body, html {
  background: skyblue;
  color: royalblue;
}

<div id="app">
  <!-- step 1: wrap the text in a display:block element -->
  <div>
    <h2>foo bar</h2>
    <h2>lorem ipsum</h2>
    <span>hey hey</span><br />
    <span>blah blah blah</span>
  </div>  
</div>

- trusktr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scarsam · Accepted Answer

这是一个可用的演示，我添加了一个容器，它的宽度与导航项相同，并使用 display: inline-block; 属性。这个 div 被包裹并居中，使用 text-align: center; 属性。我将 a 的文本对齐方式从居中改为左对齐，以使其在 div 内左对齐。此外，建议您验证 HTML，因为您的代码中似乎存在一些错误。

如果您想了解有关良好的 HTML 模板的更多信息，请查看此问题：良好的 HTML 模板如果您想清理代码，请查看此页面：DirtyMarkup

HTML

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

CSS

.text-center {
  text-align: center;
}

.display-inline {
  display: inline-block;
}

a {
  text-align: left;
}