Question

我正在使用HTML和CSS。我无法在屏幕中间显示所有内容以显示不同的显示尺寸。我试图使用％代替PX，但它不适合小屏幕尺寸，如800 * 600像素。我也进行了网络搜索，但我对HTML的深入了解阻碍了我的进步。我的代码是这样的：

<style type="text/css">
#Line5
{
   color: #7B7BC0;
   background-color: #7B7BC0;
   border-width: 0px;
}
#wb_Text1 
{
   background-color: transparent;
   border: 0px #8B8B00 solid;
   padding: 0;
}
<body>
<hr id="Line5" align="center" style="position:relative;top:28px;width:803px;height:93px ;z-index:0;">
<div id="wb_Text1" style="position:absolute;left:406px;top:58px;width:308px;height:36px;text-align:center;z-index:1;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>

有人可以为我纠正这段代码吗？

Answer 1

不知道您想要的输出是什么样的。但请检查一下。

Click Here for Demo

<div id="wb_Text1">
<span class="head"><strong><em>SAMPLE TEXT</em></strong></span>
</div>

Answer 2

此处更新的代码及其工作正常。

<div id="wb_Text1" style="position:relative;display:table;margin-left:auto;width:100%;height:36px;text-align:center;margin-right:auto;z-index:1;background-color: #7B7BC0;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>

Answer 3

不清楚你的问题，但我认为以下任何一个例子都适合你; 如果您希望它符合标准，请在样式表中使用：

body { 
text-align:center; 
} 
#mainContainer { 
margin:0 auto; 
}

正文使其在IE中运行，margin:0 auto;使其成为大多数其他浏览器的中心。

您可能需要进入并将部分主要容器重置为text-align:left;，因为正文text-align:center有时会落入网站内容，但您可以通过添加

来抵消这种情况

text-align:left; 
to #mainContainer

或者，可能有更好的方法，但到目前为止，这适用于所有浏览器：

body {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}

或将正文宽度设置为100％，然后只为页面设置容器div

#container {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}

Answer 4

也不太确定你要求的是什么。我正在解释它，因为你希望div垂直和水平居中，这就是我想要的。

<强> HTML

<div id="wb_Text1">
    <b>SAMPLE TEXT</b>
</div>

<强> CSS

body {
    height: 100%; 
    width: 100%; //these two are so that the automatic margins work for the div.
}
#wb_Text1 {
    height: 93px; //or whatever height you want
    width: 300px; //or whatever width you want (can be in %)
    background-color: #7B7BC0;
    border: 0px;
    padding: 0px;
    font: 32px Arial;
    line-height: 93px; //should be same as the height if you've only got one line of text and you want it vertically centered in the div
    color: #fff;
    text-align:center;
    margin: calc(0.5 * (50% - 46.5px)) auto; //first value makes it vertically centered, the second makes it horizontally centered.
    margin: -webkit-calc(0.5 * (50% - 46.5px)) auto; //for Safari
}

以下是calc()：

中发生的事情

50%为您提供页面总高度的一半

46.5px是div高度的一半，在本例中为93，

50% - 46.5px为您提供垂直居中div所需的空间量

在这里小提琴：http://jsfiddle.net/Shiazure/hA9KB/

Answer 5

我感谢所有帮助过我的人。通过添加以下代码解决了问题。

    <style type="text/css">
    div#container
    {
       width: 990px;
       position: relative;
       margin-top: 0px;
       margin-left: auto;
       margin-right: auto;
       text-align: left;
    }
    ....
    .....
    ........
    <body>
    <div id="container">
    ...
    ....

非常感谢你帮助一个菜鸟！

在所有屏幕尺寸的中心放置一个网页

5 个答案: