以HTML/CSS为中心的格式_Html_Css_Formatting_Centering

以HTML/CSS为中心的格式

html css formatting

以HTML/CSS为中心的格式,html,css,formatting,centering,Html,Css,Formatting,Centering,我只是在摆弄RubyonRails和HTML。这个问题不是关于RoR，而是HTML和CSS。当我的身体居中时，我得到：如何使项目符号也居中于文本旁边另外，如何使while边框塌陷，使其更接近文本这是我的密码：我的应用程序布局： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"

我只是在摆弄RubyonRails和HTML。这个问题不是关于RoR，而是HTML和CSS。当我的身体居中时，我得到：

如何使项目符号也居中于文本旁边

另外，如何使while边框塌陷，使其更接近文本

这是我的密码：

我的应用程序布局：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
    <head>
        <%= javascript_include_tag :defaults -%>
        <title><%= page_title.capitalize -%></title>
        <%= stylesheet_link_tag 'main' %>
    </head>

    <body>
        <div id="body" style="margin:0 auto; width:600px;">
            <%= yield -%>
            <%= render :partial => "layouts/footer" -%>
        </div>
    </body>

</html>

更好的做法是一次将文本集中在一个元素的中心，而不是在主体级别

<html>
<body>
<div style="margin:0 auto;width:800px;">
<h4 style="text-align:center">Welcome</h4>
<ul>
    <li>List item</li>
    <li>List item</li>
</ul>
</div>
</body>
</html>


欢迎

列表项
列表项

这不仅能让你更好地控制你的布局，还能让你只把你想要的东西放在中心

看到下面的代码后，删除文本align:center；在#body标记中，这将有助于减轻列表图标粘在左侧的问题。

我认为您需要设置文本缩进属性，并且可能还需要调整边距和填充

但是，从屏幕截图上看，您缺少了对HTML的一些基本理解。你必须做一些古怪的事情来显示这样的子弹

发布代码，我可以给出更好的解释。

尝试将列表放在容器div中，并使用左/右边距：自动技巧。我会避免将列表居中，因为它会破坏内容的组织

<div style="width: auto; margin-left: auto; margin-right: auto;">
[your list here]
</div>


[你的名单在这里]

仅供参考。。。实际上，您可以设置元素的样式。就我个人而言，我会缩小范围并将其居中。您还希望避免在所有元素上执行

文本对齐：居中

；i、 e，你可能想要下面这样的东西

<style type="text/css">
    html { text-align: center; }
    body { width: 960px; margin: 0 auto; }
    li { text-align: left; }
</style>


html{text align:center；}
正文{宽度：960px；边距：0自动；}
li{文本对齐：左；}

问题在于您将列表元素（文本）居中，而不是列表本身。如果使用例如检查元件，则可以看到每个元件的实际尺寸。然后你就会明白为什么它是这样集中的

我建议您阅读这篇文章。

我假设，当您说希望列表居中时，您实际上希望的是将边界框围绕列表居中。在其上使用表格显示模式并设置自动边距适用于除IE之外的所有内容。为了IE，您必须在列表上设置宽度

另一件需要修正的事情是你建立列表的方式。ul元素内部应该出现的唯一元素是li元素。换句话说，ol应该出现在li的内部

在这里，所有这些都放在一起：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      h1, h3 { text-align: center; }
      ul { margin-left: auto; margin-right: auto; width: 100px; }
    </style>
  </head>
  <body>
    <h1 id="welcome_sign">Welcome!</h1>
    <h3 id="sitemap">Site Map</h3>
    <ul>
        <li>
          Animals
          <ol>
            <li>Hello</li>
          </ol>
        </li>
        <li>
          Machines
          <ol>
            <li>Products</li>
            <li>Report</li>
            <li>Robot</li>
            <li>Show</li>
          </ol>
        </li>
    </ul>  
  </body>
</html>


h1，h3{文本对齐：居中；}
ul{左边距：自动；右边距：自动；宽度：100px；}
欢迎
站点地图


动物
你好


机器
产品
报告
机器人
展示

屏幕截图很好。实际的HTML会更好。我们是程序员，我们需要看到代码。既然你承认这与Ruby on Rails无关，我就删除了

ror

标记。代码现在就在那里。顺便说一句，我添加了ROR标签，因为现在它确实处理RubyonRails：DAnybody有什么建议吗？嗯，这样很有效。。。现在的问题是，所有文本都在白色框的右侧。我希望所有文本都居中。有什么想法吗？我还需要把“站点地图”直接放在“欢迎”下面，把它直接放在“欢迎”下面只是设置h4元素的行高以及填充/边距的问题。这很好，但问题是列表在左边。我需要整个列表，包括中间的点和数字

<style type="text/css">
    html { text-align: center; }
    body { width: 960px; margin: 0 auto; }
    li { text-align: left; }
</style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      h1, h3 { text-align: center; }
      ul { margin-left: auto; margin-right: auto; width: 100px; }
    </style>
  </head>
  <body>
    <h1 id="welcome_sign">Welcome!</h1>
    <h3 id="sitemap">Site Map</h3>
    <ul>
        <li>
          Animals
          <ol>
            <li>Hello</li>
          </ol>
        </li>
        <li>
          Machines
          <ol>
            <li>Products</li>
            <li>Report</li>
            <li>Robot</li>
            <li>Show</li>
          </ol>
        </li>
    </ul>  
  </body>
</html>