Question

我有一个真正的问题，我确信这只是因为我没有长时间编码，很容易忽略简单的错误。我试图集中一个地址，并尝试在div中包含，或者只是单独格式化它，但我不能让它居中。请注意，我希望地址保持固定在屏幕上，因此滚动时它不会移动。这是我的代码（我知道每个人都讨厌粘贴大部分代码的人，但我还没有学习如何链接我的jsfiddle页面）

<link rel="stylesheet" href="stylesheet for real index.css">
</style>
    <head>
    <title>Test of notepad ++</title>
    </head>
        <body>
<div style="text-align: center;height: 100%;background: #4FD5D6;">
    <iframe src="index.html" scroll="no">Your browser doesn't support iFrames.</iframe>
</div>
<div class="center">
    <address>
    Made by <em><b>Dantoon e</b></em><br>So look out
    </address>
</div>
</body>

和css

body {
  font-family: Nobile;
  background-color: #4FD5D6;
  display: empty-cells;  }  
iframe {
  display: block !important;
  width: 1200px;
  height: 1200px;
  margin-top: -20px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: -1000px;
  box-shadow: 10px 10px 10px;
  position: relative;
  z-index: 0;  }
.center  { 
  border-top: thick dotted;
  border-bottom: thick dotted;
  background-color: black;
  color: white;  
  position: fixed;
  bottom: 5px;
  width: 1204px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:5px;
  display: inline;
  margin-top: 0px;
  z-index: 1;  }

我只包括整个页面，因为我不知道其他地方可能会影响地址。谢谢你提前！

Answer 1

你错过了一个开放的html标签，并且身体在更接近之前，加上一个随机/风格：）

<html>
    <head>
        <link rel="stylesheet" href="stylesheet for real index.css" />
        <title>Test of notepad ++</title>
    <head>
    <body>
        <div style="text-align: center;height: 100%;background: #4FD5D6;">
            <iframe src="index.html" scroll="no">Your browser doesn't support iFrames.</iframe>
       </div>
       <div class="center">
           <address>
                Made by <em><b>Dantoon e</b></em><br>So look out
           </address>
       </div>
    </body>
</html>

使用CSS：

.center {
    display: block;
    border-top: thick dotted;
    border-bottom: thick dotted;
    background-color: black;
    color: white;
    position: fixed;
    bottom: 5px;
    width: 100%;
    text-align: center;
}

这是一个有效的小提琴（br需要一个尾随斜线）。另外，我不会把东西修复到1200像素 - 使用100％ http://jsfiddle.net/QcSt9/1/

Answer 2

您需要做的是对此进行一些更改：

添加一个容器/父div，它将包含iframe和center class div的子div中：

<div class="container">
    <iframe></iframe>
     <div class="center">
        <address>blah</address>
     </div>     
</div>

该容器将具有相对的类位置....然后您可以绝对地将您的senter类放在底部并根据您给出的iframe（1200px）的容器宽度居中

这是：

FIDDLE

Answer 3

此外，不确定你是否通知，但你的样式表链接在头脑之外，你有一个无用的stlye靠近并使用内联样式（没错，但不推荐以太）

希望这会有所帮助：）

中心地址，我发现我已经尝试过的每个解决方案

3 个答案: