无法使浮动div与文本居中对齐
无法使浮动div与文本居中对齐
提问于 2013-01-13 11:55:39
有没有人知道我该怎么做：
<div width="100%" style="background-color:#0000FA;">
<div style="float:left;width:110px;background-color:#F1F1F1;">
<form action="/dashboard/" id="PREVIOUS_MONTH" method="post">
<input type="submit" class="button-orange" value="Previous Month">
</form>
</div>
<div style="float:left;width:300px;text-align:center;">
January
</div>
<div style="float:right;width:80px;background-color:#F9F0F0;">
<form action="/dashboard/" id="NEXT_MONTH" method="post">
<input type="submit" class="button-orange" value="Next Month">
</form>
</div>
</div>我想要的就是让左边的按钮在左边，右边的按钮在右边，文本在两个按钮之间对齐，即在外部div的中间。
我尝试过使用display:inline来实现文本按钮，但是我一直没有成功。
因此，我的输出将是：
BUTTON
提前感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-01-13 12:06:46
如果你不浮动文本，那么你应该是好的。您还需要将浮点数放在文本之前。
<div width="100%" style="background-color:#0000FA;">
<div style="float:left;width:110px;background-color:#F1F1F1;">
<form action="/dashboard/" id="PREVIOUS_MONTH" method="post">
<input type="submit" class="button-orange" value="Previous Month">
</form>
</div>
<div style="float:right;width:80px;background-color:#F9F0F0;">
<form action="/dashboard/" id="NEXT_MONTH" method="post">
<input type="submit" class="button-orange" value="Next Month">
</form>
</div>
<div style="text-align:center;">
January
</div>
</div>http://jsfiddle.net/BXp9v/2/
Stack Overflow用户
发布于 2013-01-13 12:11:51
你有很多问题。正如James所说，不要让文本浮动。然后，两个输入都没有正确闭合，剩下的两个浮点数的宽度太小(而且没有必要)。
http://jsfiddle.net/FxcWB/3/
<div style="text-align: center;">
<div style="float:left;">
<form action="/dashboard/" id="PREVIOUS_MONTH" method="post">
<input type="submit" class="button-orange" value="Previous Month" />
</form>
</div>
<div style="float:right;">
<form action="/dashboard/" id="NEXT_MONTH" method="post">
<input type="submit" class="button-orange" value="Next Month" />
</form>
</div>
<div>January</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14300518
复制相关文章
相似问题
腾讯云开发者
