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

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

html css

Html 当有垂直导航栏/侧边栏时，如何将文本居中？,html,css,Html,Css,我的网站左侧有一个垂直导航栏，因此当我将文本居中时，它会居中，但不会在绿色部分居中。侧栏{ 位置：固定；身高：100%；左：0；顶部：0px；宽度：300px；背景：#6495ED； } h1{ 文本对齐：居中； } 保险商实验室{ 列表样式类型：无；保证金：0；填充：0；宽度：300px；背景色：#6495ED； } 李阿{ 显示：块；颜色：#000000；填充：8px 0 8px 16px；文字装饰：无；字体大小：50px；字体系列：“Verdana”，日内瓦

我的网站左侧有一个垂直导航栏，因此当我将文本居中时，它会居中，但不会在绿色部分居中

。侧栏{
位置：固定；
身高：100%；
左：0；
顶部：0px；
宽度：300px；
背景：#6495ED；
}
h1{
文本对齐：居中；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
宽度：300px；
背景色：#6495ED；
}
李阿{
显示：块；
颜色：#000000；
填充：8px 0 8px 16px；
文字装饰：无；
字体大小：50px；
字体系列：“Verdana”，日内瓦，无衬线；
}
李娜：停下来{
背景色：#27C0FD；
颜色：#000000；
}


信息技术网站

首先，您的元素排序不好，您必须将

写入

标记中，而不是

要使h1居中，您必须在左侧添加300px的填充，因为您的“固定”定位边栏不会在主体画布中发生物理位置，因此，如果您使用“固定”或“绝对”定位，则它不会在其他元素的定位中起作用。

添加

左侧填充：300px

到

主体


这与布局有关。

无论如何，由于您的侧边栏宽度为300px且固定位置，您可以将左边距：300px
添加到正文
，因此添加的任何内容都将对齐到绿色位置。
根据您的代码添加左边距：300px
toh1
将使您的h1位于正确的中心
因为您的边栏是固定的，并且具有宽度：300px

以及为什么您的h1
位于head
部分

。侧栏{
位置：固定；
身高：100%；
左：0；
顶部：0px；
宽度：300px；
背景：#6495ED；
}
h1{
文本对齐：居中；
左边距：300px；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
宽度：300px；
背景色：#6495ED；
}
李阿{
显示：块；
颜色：#000000；
填充：8px 0 8px 16px；
文字装饰：无；
字体大小：50px；
字体系列：“Verdana”，日内瓦，无衬线；
}
李娜：停下来{
背景色：#27C0FD；
颜色：#000000；
}

信息技术网站






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








信息技术网站
给你：
.sidebar {
   position: fixed;
   height:100%; 
   left: 0;
   top: 0px;
   width: 25%;
   background:#6495ED; 
   }
   #Content {
     width: 75%;
     float: right;
   }


您需要另一个div
将h1
放入其中，然后对两个div的width
使用percentage
，表示称为content
和侧栏的新div。您的问题是h1
获得了页面的全宽，因为您的侧栏具有固定的位置，您需要使用百分比
宽度来保持它们相等。对于内容
和宽度：75%，只需一个浮动：右
和侧边栏的宽度为25%
将解决您的问题。
使用以下css
进行。sldebar
规则：
.sidebar {
  position: fixed;
  height: 100%;
  left: 50%;
  top: 0px;
  width: 300px;
  background: #6495ED;
  transform: translateX(-50%); 
}

您已经在侧边栏中指定了绝对宽度
，这通常是可以的。但是您的
是在侧边栏容器之外声明的（如前所述，侧边栏容器具有固定的宽度）。要将
放在中间，只需指定一个左填充：300px
（正如其他人在这里已经多次提到的）到您的
，或者，为了方便将来的使用，将您的侧栏和
包装到父容器中，这样您的侧栏和
将自动装入父容器中。执行此操作时，请使用文本对齐：居中
上的code>应该在没有填充的情况下工作。
请注意，使用左填充或任何其他方法来解决此问题是错误的。但这取决于你；）这是关于S.O.CSS的最奇怪的问题，就像中间开发人员一样。和HTML，就像第一次编码一样，首先用我的HTML替换你的HTML。然后为它编写css。