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

时间:2016-03-16 07:06:07

标签: html css

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

.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 谢谢!

7 个答案:

答案 0 :(得分:2)

您使用的是错误的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>

答案 1 :(得分:1)

根据您的代码,将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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

padding-left:300px添加到body

这与布局有关。

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

答案 5 :(得分:0)

在这里:

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

<强> jsFiddle

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

答案 6 :(得分:0)

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

{{1}}