Question

我的网站左侧有一个垂直导航栏，所以当我居中文字时，它居中但不在绿色部分居中。

.sidebar {
    position: fixed;
    height:100%;
    left: 0;
    top: 0px;
    width: 300px;
    background:#6495ED;
}
 
h1 {
    text-align: center;
}
 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 300px;
    background-color: #6495ED;
}
 
li a {
    display: block;
    color: #000000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    font-size: 50px;
    font-family: "Verdana", Geneva, sans-serif;
}
 
 
li a:hover {
    background-color:#27C0FD;
    color: #000000;
}

<html>
<link rel="stylesheet" type="text/css" href="css.css">
<body bgcolor="#81F781">
<head>
<h1> Informational Tech Site</h1>
 
</head>
 
<body>
<div class="sidebar">
    <ul>
    <li><a href="#home">Home</a> </li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>  
</div>
 
</body>

代码就在这里。 http://pastebin.com/xgvt4P0a

这是文本居中的图像，但不是绿色部分的居中。 https://imgur.com/kkDlnik 谢谢！

Answer 1

您使用的是错误的HTML，所以我不会向前推进。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body bgcolor="#81F781">
<div id="sidebar">
    <ul>
        <li><a href="#home">Home</a> </li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>  
</div>
<div id="content">
    <h1> Informational Tech Site</h1>
<div>
</body>
</html>

Answer 2

根据您的代码，将margin-left:300px;添加到h1会使您的h1处于正确的中心位置。

因为您的侧边栏已修复且有width:300px。

为什么您在h1部分中有head。

.sidebar {
  position: fixed;
  height: 100%;
  left: 0;
  top: 0px;
  width: 300px;
  background: #6495ED;
}

h1 {
  text-align: center;
  margin-left: 300px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 300px;
  background-color: #6495ED;
}

li a {
  display: block;
  color: #000000;
  padding: 8px 0 8px 16px;
  text-decoration: none;
  font-size: 50px;
  font-family: "Verdana", Geneva, sans-serif;
}

li a:hover {
  background-color: #27C0FD;
  color: #000000;
}

<html>
<link rel="stylesheet" type="text/css" href="css.css">

<body bgcolor="#81F781">

  <head>
    <h1> Informational Tech Site</h1>

  </head>

  <body>
    <div class="sidebar">
      <ul>
        <li><a href="#home">Home</a> </li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>

  </body>

<强> Fiddle

Answer 3

您已经为侧边栏指定了绝对width，这通常很好。但是你的<h1>是在你的侧边栏容器之外声明的（正如已经说过的那样，它具有固定的宽度）。要将<h1>置于中心位置，只需在padding-left: 300px;指定<h1> （已在其他人处提及过几次），或者即可为了将来的目的，响应速度更快，将sidebar和<h1>包装在父容器中，这样您的sidebar和<h1>将自动适合该父容器。这样做时，在text-align: center;上使用<h1>应该无需填充。

Answer 4

首先，您的元素排序不好，您必须在<h1>标记内写<body>而不是<head>

要使h1居中，您必须在左侧添加300px填充，因为您已经修复了＆＃39;定位侧边栏不会在正文画布中占据实际位置，因此，如果您正在使用“固定的”＃39;或者绝对的＆＃39;定位它不会影响其他元素的定位。

Answer 5

将padding-left:300px添加到body

这与布局有关。

无论如何，由于您的侧边栏宽度为300px且固定位置，您只需将padding-left:300px添加到body，因此添加的任何内容都将与绿色位置对齐。

Answer 6

在这里：

.sidebar {
   position: fixed;
   height:100%; 
   left: 0;
   top: 0px;
   width: 25%;
   background:#6495ED; 
   }
   #Content {
     width: 75%;
     float: right;
   }

<强> jsFiddle

您需要另一个div将h1添加到其中，然后将percentage用于两个div的width，表示名为content的新div和{{1} }}。由于您的sidebar位置h1，因此您的问题sidebar占据了网页的全宽，您需要使用fixed宽度来保持平等。仅percentage的{{1}}和float: right的{{1}}以及content width: 75%;将解决您的问题。

Answer 7

对.sldebar规则使用以下.sidebar { position: fixed; height: 100%; left: 50%; top: 0px; width: 300px; background: #6495ED; transform: translateX(-50%); }：

{{1}}

当有垂直导航栏/侧边栏时，如何将文本居中？

7 个答案: