HTML/CSS 居中格式

发布于 2024-07-25 17:21:46 字数 2163 浏览 13 评论 0原文

我只是在摆弄 Ruby on Rails 和 HTML。这个问题不是关于 RoR 的，而是关于 HTML 和 CSS 的。当我集中身体时，我得到这个：帮助 http://img88.imageshack.us/img88/2203/help.tif

如何让项目符号也位于文本旁边的中心？

另外，我怎样才能让边框折叠起来，使其更接近文本？

这是我的代码：

我的应用程序布局：

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

我的页面，其中包含列表：

<h1 id="welcome_sign">Welcome!</h1>
<h3 id= "sitemap">Site Map </h3>

<ul>
    <li><%= link_to "Animals", "/animals"%></li>
        <ol><li><%= link_to "Hello", "/animals/hello"%></li></ol>
    <li><%= link_to "Machines", "/machines"%></li>
    <ol>
        <li><%= link_to "Products", "/machines/products" %></li>
        <li><%= link_to "Report", "/machines/report" %></li>
        <li><%= link_to "Robot", "/machines/robot" %></li>
        <li><%= link_to "Show", "/machines/show" %></li>
    </ol>
</ul>

最后是我的 CSS：

#footer {
    font-size: 10pt;
    padding: 10px;
}

#sitemap {
    margin-bottom: 1em;
    line-height: 1.5em;
    margin-left: 2.0em;
    padding: 10px;

}

#welcome_sign {
    padding: 10px;
 }

body {
    background-color: #CDEAFF;

}

#body {
    background-color: #fff;
    border-top: 5px solid #999;
    border-bottom: 5px solid #999;
    border-right: 5px solid #999;
    border-left: 5px solid #999;
    text-align: center;
}

原文

Im just messing around with Ruby on Rails and HTML. This question isn't about RoR, but HTML and CSS. When I center my body, I get this:
Help http://img88.imageshack.us/img88/2203/help.tif

How can i get the bullets to be centered next to the text as well?

Also, how can I get the while border collapse so its closer to the text?

Here is my code:

My app layout:

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

My Page, which has the list:

<h1 id="welcome_sign">Welcome!</h1>
<h3 id= "sitemap">Site Map </h3>

<ul>
    <li><%= link_to "Animals", "/animals"%></li>
        <ol><li><%= link_to "Hello", "/animals/hello"%></li></ol>
    <li><%= link_to "Machines", "/machines"%></li>
    <ol>
        <li><%= link_to "Products", "/machines/products" %></li>
        <li><%= link_to "Report", "/machines/report" %></li>
        <li><%= link_to "Robot", "/machines/robot" %></li>
        <li><%= link_to "Show", "/machines/show" %></li>
    </ol>
</ul>

And finally, my CSS:

#footer {
    font-size: 10pt;
    padding: 10px;
}

#sitemap {
    margin-bottom: 1em;
    line-height: 1.5em;
    margin-left: 2.0em;
    padding: 10px;

}

#welcome_sign {
    padding: 10px;
 }

body {
    background-color: #CDEAFF;

}

#body {
    background-color: #fff;
    border-top: 5px solid #999;
    border-bottom: 5px solid #999;
    border-right: 5px solid #999;
    border-left: 5px solid #999;
    text-align: center;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独自唱情﹋歌 2024-08-01 17:21:46

我假设当您说希望列表居中时，您实际想要的是将列表周围的边界框居中。使用表格显示模式并设置自动边距适用于除 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>

I'm assuming that when you say you want the list centered, what you actually want is to center the bounding box around the list. Using the table display mode on it and setting auto margins works for everything except for IE. For the sake of IE, you instead have to set a width on the list.

Another thing that should be fixed is the way that you're building the list. The only elements that should appear inside of an ul element are li elements. In other words, the ol's should appear inside of the li's.

Here it is all put together:

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

回复收藏 0 原文

携余温的黄昏 2024-08-01 17:21:46

更好的做法是一次将文本集中在一个元素上，而不是在正文级别上。

<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>

这不仅可以让您更好地控制布局，还可以让您仅将您想要的内容居中。

看到下面的代码后，删除 text-align: center; 在 #body 标记中，这应该有助于缓解列表图标粘在左侧的情况。

The better practice is to center the text one element at a time, rather than at the body level.

<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>

Not only does this give you far better control of your layout, it will also allow you to ONLY center things that you want to.

After seeing your code below, remove the text-align: center; in the #body tag, this should help alleviate the list icons sticking to the left.

回复收藏 0 原文

葮薆情 2024-08-01 17:21:46

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

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

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

回复收藏 0 原文

唱一曲作罢 2024-08-01 17:21:46

问题是您将列表元素（文本）居中，而不是列表本身。如果您使用 Firebug 检查元素，那么您将看到每个元素的实际大小。然后你就会明白为什么它是这样居中的。

我建议您阅读这个关于列表的教程。

回复收藏 0 原文

旧竹 2024-08-01 17:21:46

尝试将列表放入容器 div 中，并使用 margin-left/right: auto 技巧。我会避免将列表居中，因为它会破坏内容的组织。

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

Try putting the list in a container div, and using the margin-left/right: auto trick. I'd avoid centering a list, since it ruins the organization of the content.

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

回复收藏 0 原文

不喜欢何必死缠烂打 2024-08-01 17:21:46

仅供参考...您实际上可以设置元素的样式。就我个人而言，我会缩小范围并将其居中。您还希望避免在所有元素上执行text-align: center；即，您可能想要类似以下的内容......

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

Just an fyi... you can actually style the element. Personally, I'd narrow that down and center it. You also want to avoid doing text-align: center on all elements; i.e, you probably want something like the following...

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

回复收藏 0 原文

~没有更多了~

关于作者

酒中人

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

HTML/CSS 居中格式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

苦中寻乐

lueluelue

嗼ふ静

王权女流氓

与花如笺

残酷

友情链接

HTML/CSS 居中格式

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

苦中寻乐

lueluelue

嗼ふ静

王权女流氓

与花如笺

残酷

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。