居中固定位置文本框,但与图片

时间:2015-09-08 04:33:46

标签: html css position center centering

我目前正在尝试创建一个居中的固定元素。我找到了一些css,但它并不像我想的那样工作。我附上一张照片来表明我的意思。

我试图在我创建的文本框旁边添加一些图片,但是他们将文本框推到一边,这样它就不再居中了。没有那里的图片,它就集中了。使用css,文本框移动到图片的顶部,这不是我需要的。图片:http://i.stack.imgur.com/glaGT.png

HTML:

  <div id="divfix">
      <center>page 
           <input size="3" id="uid" value="1"> of 3       
  </div> &emsp;
            <img class="imiddle" title="next" alt="next" src="img/next.png" hspace="0" height="13" border="0" width="26">&nbsp&nbsp 
            <img class="imiddle" title="last" alt="last" src="img/last.png" hspace="0" height="13" border="0" width="26">
       </center>      

CSS:

 #divfix {
  /* fixed position a zero-height full width container */`
    position: fixed;
    top: 390;
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
  }

 #divfix {
   /* make the block inline */
    display: inline-block;
   /* reset container's center alignment */
   text-align: left;
}

我可以做些什么来完成这项工作?谢谢!任何帮助表示赞赏。 =)

〜更新问题〜!

嗨!我重新写这篇文章只是为了帮助别人。 我发现了为什么我的代码对你们不起作用的原因。 在我的原始帖子中,我使用反引号转义(或严重重音)来突出显示我的代码。

我在每一行都使用了反引号转义符,因为使用了两个反引号转义符,一个在我的代码之前,一个在我的代码之后没有突出显示所有内容。

不幸的是,当我的帖子被其他人编辑时,他们在我的CSS中留下了一个反引号,我没有注意到。

因为我得到了一个问题的答案,基本上做了我想要的,我接受了它,忘记了我的问题。

我已经尝试重新创建我的问题,并取得了成功。这是为了重新打开我的问题,因为我认为它不应该被关闭。特别是如果它只是编辑的错误。

〜1。具体是什么错误?〜

错误是编辑后在我的CSS中留下的一个反复。 这是违规代码: #divfix { /* fixed position a zero-height full width container */' 我使用撇号代替反引号,因为由于某种原因,反叛不会显示。

这应该是这样的: #divfix { /* fixed position a zero-height full width container */container */之后没有任何反引号。

〜2。这会对您的代码产生什么影响?〜

反引号基本上忽略了你的css中的下一行。 这与删除下一行相同。 受影响的行是position: fixed;,这使我的代码无法被其他人复制。

另一个问题是我没有提供我的整个文件(我认为它太大了,无论如何都不能在我的问题中显示。)所以我只提供了我想要改变的具体代码。

〜3。你是怎么发现错误的?〜

首先,我必须将我在此处给出的代码替换为我在此处发布的原始代码的答案。

接下来,我必须找到我在其他网站上找到的原始css代码,只是为了将它与我在堆栈交换中发布的代码进行比较。

首先,我发现我找到的网站上的原始代码与我发布的代码之间没有任何区别。当原始版本为top: 390;

时,唯一的区别是top: 0;

我玩过空间,认为可能会修复它,因为网站上的代码是用标签空格制作的,而我在这里发布的代码只是空格,大约有3或4个。

没有骰子,没有任何方法可以玩空间。

接下来,我找到了一个名为&#39; diffnow&#39;比较两个css代码,因为我自己也找不到任何问题。

我当然找到了top: 390; vs top: 0;但后来我在container */之后发现了一个反击。

〜4。你是怎么解决这个错误的?〜

我删除了有问题的反引号字符,我的代码更改为应该如何显示。在添加Paulie_D建议的新代码之前,我丢失了原来的工作。因此,在实现我在堆栈交换上发布的旧代码时,我还必须将left: 0;更改为left: 3;,使其位于与之前完全相同的位置。不知道为什么会这样。

〜5。错误的结果是什么?〜

错误的结果是忽略了position: fixed;

这有什么影响? 在我的原始代码中,包含&#39; next.png&#39;和&#39; last.png&#39; 处于中心位置,隐藏在文本框<input>后面,表示第1页的第3页。

我想解决这个问题,这就是我问这个问题的原因。

然而,不幸的是,一位编辑留下了反击。

反击的影响是它似乎已经“固定”了。我的代码,不再能够重现原始代码或我所询问的内容。

由于反引号忽略了我的position: fixed; ...我在其他地方读到了如果没有诸如绝对&#39;之类的位置或者&#39;固定&#39;如果给出,则默认为“静态”。这不是我想表达的。

这弄乱了我的问题,并且做到了这样我没有任何人可以复制的东西。

- 请注意,因为我还是比较新的html&amp; css,我不知道不同的css位置或他们做了什么之间的区别。

&#39;职位:固定&#39;实际上并不是我想要的,因为当我调整窗口大小以使其变小时,html文本框<input>向下移动,这不是我想要的。此外,如果我使html文档更长,固定元素将在滚动时跟随页面,这是我不想要的。

我想要的是静态&#39;或者“亲戚”但没有修复&#39;或者&#39;绝对。&#39;

同样,虽然它与我的实际问题无关,因为它是以前的经验,并且不适用于我当前的代码或问题,我之前说过,图像将文本框推到一边所以它不再居中。&#39;

拥有我之前制作的早期原始代码,因此我不知道我的意思是什么,因为我无法重现这种效果。如果有人能够理解这一点,并回复我们认为我用html做了什么,那就非常感激。谢谢。 ^ - ^〜

〜6。反引号之前和之后的任何例子?〜

是的,我在css中的反引号之前和之后做了一些例子。

示例:

由于我需要10个或更多信誉才能发布2个以上的链接,因此我将链接包含在pastebin文件链接中。

此链接包含我的html&amp; amp; css在反击之前,以及之后。它还包括预览图像。

链接是:http://pastebin.com/ne7B1q6P

〜7。兼容性?〜

请注意,为了正确显示,我使用浏览器k-meleon。 您自己只需编辑一个css / html值的任何其他浏览器。

例如,将top: 390;更改为top: 414;以在Firefox中正确显示。至少那是我的Firefox的数字,对你来说可能有所不同。

对于不同的分辨率,您可以在我的代码中添加/删除中断<br>。 无论如何,我必须做的就是让我的代码在不同的分辨率上正确显示。

我已包含&#39;宽x 720分辨率&#39;作为我链接中的测试分辨率,以及宽度x 768分辨率&#39;这是我系统上的默认分辨率。

感谢阅读!我希望你现在能更清楚地理解我的问题。 ^ _ ^

1 个答案:

答案 0 :(得分:1)

你有一些结构性错误,因为你很快就关闭了div。

此外,<center>标记已弃用,不应再使用。

&#13;
&#13;
#divfix {
  /* fixed position a zero-height full width container */
  position: fixed;
  top: 390;
  left: 0;
  right: 0;
  background: lightblue;
  /* center all inline content */
  text-align: center;
}
.input {
  display: inline-block;
  position: relative;
}
.controls {
  position: absolute;
  top: 0;
  left: 100%;
  width: auto;
  white-space: nowrap;
}
&#13;
<div id="divfix">
  <div class="input">page
    <input size="3" id="uid" value="1">of 3 &emsp;
    <div class="controls">
      <img class="imiddle" title="next" alt="next" src="http://lorempixel.com/output/abstract-h-c-13-26-7.jpg" hspace="0" height="13" border="0" width="26">&nbsp&nbsp
      <img class="imiddle" title="last" alt="last" src="http://lorempixel.com/output/abstract-h-c-13-26-7.jpg" hspace="0" height="13" border="0" width="26">
    </div>
  </div>
</div>
&#13;
&#13;
&#13;