居中固定位置文本框，但与图片在同一行
Centering fixed position textbox, but on same line as picture
我目前正在尝试创建居中的固定元素。我找到了一些 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>  
<img class="imiddle" title="next" alt="next" src="img/next.png" hspace="0" height="13" border="0" width="26">  
<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;
}
我该怎么做才能完成这项工作？谢谢！任何帮助表示赞赏。 =)
~问题更新~!
嗨！我正在重写这篇文章，以防它对其他人有所帮助。
我发现了为什么我的代码对你们不起作用的原因。
在我原来的 post 中，我使用反引号转义符（或重音符号）来突出显示我的代码。
我在每一行都使用了反引号转义符，因为使用了两个反引号转义符，一个在我的代码之前，一个在我的代码之后，并没有同时突出显示所有内容。
不幸的是，当我的 post 被其他人编辑时，他们在我的 css 中留下了一个反引号，我没有注意到。
由于我的问题得到的答案基本上符合我的要求，所以我接受了它，并忘记了我的问题。
我现在尝试重现我的问题，并且成功了。这是希望重新提出我的问题，因为我认为它不应该被关闭。特别是如果这只是编辑的错误。
~1.那具体是什么错误呢？~
错误是在我的 css 编辑后留下了一个反引号。
这是有问题的代码：
#divfix { /* fixed position a zero-height full width container */'
我使用 apostrophe 代替反引号，因为由于某种原因反引号不会显示。
本来应该是这样的：
#divfix { /* fixed position a zero-height full width container */
container */.
后没有任何反引号
~2.这对您的代码有什么影响？~
反引号基本上会忽略 css 中的下一行。
这与删除下一行相同。
受影响的行是 position: fixed; 这使得我的代码无法被其他人复制。
另一个问题是我没有提供我的整个文档（我认为它太大而无法在我的问题中显示。）所以我只提供了我想要更改的具体代码。
~3.你是怎么发现错误的？~
首先，我必须用我在此处 post 编辑的原始代码替换此处作为答案给出的代码。
接下来，我必须找到我在另一个网站上找到的原始 css 代码，以便将它与我在堆栈交换中 post 编辑的代码进行比较。
起初，我找不到我从网站上找到的原始代码和我 post 编辑的代码之间的任何区别。唯一的区别是 top: 390;，而原来的是 top: 0;
我尝试使用空格，认为这可能会解决它，因为网站上的代码是用制表符空格制作的，而我在此处 posted 的代码只有空格，大约有 3 或 4 个他们。
没有骰子，玩空格什么都没有。
接下来，我找到了一个名为 'diffnow' 的网站来比较这两个 css 代码，因为我自己找不到任何问题。
然后我当然发现 top: 390; 与 top: 0; 但后来我在 container */ 之后发现了反引号。
~4.你是如何修复错误的？~
我删除了有问题的反引号字符，并且我的代码更改为它应该如何显示。在添加 Paulie_D 建议的新代码之前，我丢失了原来的工作。因此，在实现在堆栈交换上 posted 的旧代码时，我还必须将 left: 0; 更改为 left: 3; 以放置在与以前完全相同的位置。不知道为什么。
~5.错误的结果是什么？~
错误的结果是忽略了position: fixed;。
这有什么影响？
在我的原始代码中，包含 'next.png' 和 'last.png' 的控件
居中，并隐藏在文本框 <input> 后面，该文本框表示第 1 页，共 3 页。
我想解决这个问题，这就是我问这个问题的原因。
然而，不幸的是编辑留下了反引号。
反引号的影响是它似乎拥有 'fixed' 我的代码，不再能够重现原始代码或我所询问的内容。
由于反引号忽略了我的 position: fixed;...我在其他地方读到如果没有给出 'absolute' 或 'fixed' 等位置，则默认为 'static'.这不是我想展示的。
这搞砸了我的问题，并使我没有任何可以被任何人复制的东西。
-- 请注意，由于我对 html 和 css 还比较陌生，所以我不知道不同 css 职位之间的区别或他们所做的事情。
'Position: Fixed' 实际上不是我想要的，因为当我调整 window 的大小以使其更小时，html 文本框 <input> 向下移动，这这不是我想要的。此外，如果我使 html 文档变长很多，固定元素将在您滚动时跟随页面，这也是我不想要的。
我想要的是 'static' 或 'relative' 而不是 'fixed' 或 'absolute.'
同样，虽然它与我的实际问题无关，因为它是以前的经验，不适用于我当前的代码或问题，但我之前说过“图像将文本框推到一边，所以它不再居中。
我没有我在将任何css包含进去之前制作的非常早期的原始代码，所以我不确定我是什么这意味着，因为我无法重现这种效果。如果有人能理解这一点，并告诉我他们认为我用 html 做了什么，那将不胜感激。谢谢。 ^-^~
~6.有反引号前后的例子吗？~
是的，我在 css.
中的反引号前后做了几个例子
示例：
由于我需要 10 个或更多声望才能 post 超过 2 个 link，我将 link 包含在一个 pastebin 文件 link 中。
此 link 包括我的 html 和 css 反引号前后的示例。它还包括预览图像。
link是：http://pastebin.com/ne7B1q6P
~7.兼容性?~
请注意，为了正确显示，我使用浏览器 k-meleon。
对于任何其他浏览器，您只需自己编辑一个 css/html 值即可。
例如，将top: 390;改为top: 414;即可在firefox中正确显示。至少这是我的 firefox 的号码，它可能与你的不同。
对于不同的分辨率，您可能 add/remove 中断 <br> 我的代码。
无论如何，这就是我的代码在不同分辨率下正确显示所要做的一切。
我已将 'width x 720 resolution' 作为测试分辨率包含在我的 link 中，以及 'width x 768 resolution' 目前我系统上的默认分辨率。
感谢阅读！我希望你现在更清楚地理解我的问题。 ^_^
您有一些结构性错误，因为您过早地关闭了 div。
此外，<center> 标签已被弃用，不应再使用。
#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;
}
<div id="divfix">
<div class="input">page
<input size="3" id="uid" value="1">of 3  
<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">  
<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>
我目前正在尝试创建居中的固定元素。我找到了一些 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>  
<img class="imiddle" title="next" alt="next" src="img/next.png" hspace="0" height="13" border="0" width="26">  
<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;
}
我该怎么做才能完成这项工作？谢谢！任何帮助表示赞赏。 =)
~问题更新~!
嗨！我正在重写这篇文章，以防它对其他人有所帮助。 我发现了为什么我的代码对你们不起作用的原因。 在我原来的 post 中，我使用反引号转义符（或重音符号）来突出显示我的代码。
我在每一行都使用了反引号转义符，因为使用了两个反引号转义符，一个在我的代码之前，一个在我的代码之后，并没有同时突出显示所有内容。
不幸的是，当我的 post 被其他人编辑时，他们在我的 css 中留下了一个反引号，我没有注意到。
由于我的问题得到的答案基本上符合我的要求，所以我接受了它，并忘记了我的问题。
我现在尝试重现我的问题，并且成功了。这是希望重新提出我的问题，因为我认为它不应该被关闭。特别是如果这只是编辑的错误。
~1.那具体是什么错误呢？~
错误是在我的 css 编辑后留下了一个反引号。
这是有问题的代码：
#divfix { /* fixed position a zero-height full width container */'
我使用 apostrophe 代替反引号，因为由于某种原因反引号不会显示。
本来应该是这样的：
#divfix { /* fixed position a zero-height full width container */
container */.
~2.这对您的代码有什么影响？~
反引号基本上会忽略 css 中的下一行。
这与删除下一行相同。
受影响的行是 position: fixed; 这使得我的代码无法被其他人复制。
另一个问题是我没有提供我的整个文档（我认为它太大而无法在我的问题中显示。）所以我只提供了我想要更改的具体代码。
~3.你是怎么发现错误的？~
首先，我必须用我在此处 post 编辑的原始代码替换此处作为答案给出的代码。
接下来，我必须找到我在另一个网站上找到的原始 css 代码，以便将它与我在堆栈交换中 post 编辑的代码进行比较。
起初，我找不到我从网站上找到的原始代码和我 post 编辑的代码之间的任何区别。唯一的区别是 top: 390;，而原来的是 top: 0;
我尝试使用空格，认为这可能会解决它，因为网站上的代码是用制表符空格制作的，而我在此处 posted 的代码只有空格，大约有 3 或 4 个他们。
没有骰子，玩空格什么都没有。
接下来，我找到了一个名为 'diffnow' 的网站来比较这两个 css 代码，因为我自己找不到任何问题。
然后我当然发现 top: 390; 与 top: 0; 但后来我在 container */ 之后发现了反引号。
~4.你是如何修复错误的？~
我删除了有问题的反引号字符，并且我的代码更改为它应该如何显示。在添加 Paulie_D 建议的新代码之前，我丢失了原来的工作。因此，在实现在堆栈交换上 posted 的旧代码时，我还必须将 left: 0; 更改为 left: 3; 以放置在与以前完全相同的位置。不知道为什么。
~5.错误的结果是什么？~
错误的结果是忽略了position: fixed;。
这有什么影响？
在我的原始代码中，包含 'next.png' 和 'last.png' 的控件
居中，并隐藏在文本框 <input> 后面，该文本框表示第 1 页，共 3 页。
我想解决这个问题，这就是我问这个问题的原因。
然而，不幸的是编辑留下了反引号。
反引号的影响是它似乎拥有 'fixed' 我的代码，不再能够重现原始代码或我所询问的内容。
由于反引号忽略了我的 position: fixed;...我在其他地方读到如果没有给出 'absolute' 或 'fixed' 等位置，则默认为 'static'.这不是我想展示的。
这搞砸了我的问题，并使我没有任何可以被任何人复制的东西。
-- 请注意，由于我对 html 和 css 还比较陌生，所以我不知道不同 css 职位之间的区别或他们所做的事情。
'Position: Fixed' 实际上不是我想要的，因为当我调整 window 的大小以使其更小时，html 文本框 <input> 向下移动，这这不是我想要的。此外，如果我使 html 文档变长很多，固定元素将在您滚动时跟随页面，这也是我不想要的。
我想要的是 'static' 或 'relative' 而不是 'fixed' 或 'absolute.'
同样，虽然它与我的实际问题无关，因为它是以前的经验，不适用于我当前的代码或问题，但我之前说过“图像将文本框推到一边，所以它不再居中。
我没有我在将任何css包含进去之前制作的非常早期的原始代码，所以我不确定我是什么这意味着，因为我无法重现这种效果。如果有人能理解这一点，并告诉我他们认为我用 html 做了什么，那将不胜感激。谢谢。 ^-^~
~6.有反引号前后的例子吗？~
是的，我在 css.
中的反引号前后做了几个例子示例：
由于我需要 10 个或更多声望才能 post 超过 2 个 link，我将 link 包含在一个 pastebin 文件 link 中。
此 link 包括我的 html 和 css 反引号前后的示例。它还包括预览图像。
link是：http://pastebin.com/ne7B1q6P
~7.兼容性?~
请注意，为了正确显示，我使用浏览器 k-meleon。 对于任何其他浏览器，您只需自己编辑一个 css/html 值即可。
例如，将top: 390;改为top: 414;即可在firefox中正确显示。至少这是我的 firefox 的号码，它可能与你的不同。
对于不同的分辨率，您可能 add/remove 中断 <br> 我的代码。
无论如何，这就是我的代码在不同分辨率下正确显示所要做的一切。
我已将 'width x 720 resolution' 作为测试分辨率包含在我的 link 中，以及 'width x 768 resolution' 目前我系统上的默认分辨率。
感谢阅读！我希望你现在更清楚地理解我的问题。 ^_^
您有一些结构性错误，因为您过早地关闭了 div。
此外，<center> 标签已被弃用，不应再使用。
#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;
}
<div id="divfix">
<div class="input">page
<input size="3" id="uid" value="1">of 3  
<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">  
<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>