中心 div 由一系列使用 CSS 的按钮组成

Posted 2023-03-29

【中文标题】中心 div 由一系列使用 CSS 的按钮组成

【英文标题】：Center div consisting of series of button using CSS

【发布时间】：2012-01-21 04:29:27

【问题描述】：

这听起来很简单，我制作了一个 div 块，其中包含一个接一个水平放置的按钮。按钮用于导航，按钮的数量根据网页动态变化。

现在我的问题是将这些按钮在每页底部的页脚注释上方居中对齐，并且对齐也应该根据按钮的增加或减少在流程中。

<div class="container">
    <div class="content">
    </div>
    <div class="navButtons">
        <a href="back.php"><input type="button" value="BACK" class="butttons" /></a>              
        <a href="home.php"><input type="button" value="HOME" class="butttons" /></a>
        <a href="next.php"><input type="button" value="NEXT" class="butttons" /></a> 
    </div>
</div>

我尝试过使用 margin: 0 auto;

左边距：自动； 右边距：自动；

但没有成功，他们只是停留在页面的左侧。

下面是 CSS 的：

.container    
    background: url('images/gray_bg.jpg');
    width: 900px;
    height: 800px;
    margin: 0 auto;        
    position: relative;
    overflow: auto;      


.navButtons
    margin: 0 auto;
    float: left;         

关于如何解决这个问题的任何好主意

谢谢

【问题讨论】：

你设置了div的宽度吗？

你能发布 .container 和 .navButtons 的 CSS 吗？如果我们看不到损坏的地方，就很难修复它

嗨，我刚刚更新了 .container 和 .navButtons 的 CSS

用小提琴查看我的更新答案。

【参考方案1】：

看到 标签是你可以做的内联项目：

div.navButtons 
    text-align: center;

看看这个小提琴看看我的意思：http://jsfiddle.net/c4urself/ZvrZW/

【讨论】：

嗨，你的小提琴产生了我想要的东西，但我的问题是我希望所有页面的按钮都保持在相同的位置

也许我的回答有效？ ，我的做法是使用 html 而不是 c4urself 方式，这是一种非常棒的方式！

【参考方案2】：

好的，使用一些带有 CSS 的 HTML，你想要的可以很容易地完成，这里是 jsfiddle 的链接

css

div.container 
    width: 100 % ;
    height: 100 % ;

div.content 
    position: absolute;
    top: 0em;
    width: 100 % ;
    bottom: 2em;
    overflow - y: auto;

div.navButtons 
    width: 100 % ;
.navButtons 
    position: absolute;
    bottom: 0px;
    left: auto;

html

<div class="container">
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 

    </div>
    <div class="navButtons">
        <center>
        <a href="back.php"><input type="button" value="BACK" class="butttons" /></a>              
        <a href="home.php"><input type="button" value="HOME" class="butttons" /></a>
        <a href="next.php"><input type="button" value="NEXT" class="butttons" /></a>     
               </center>
        </div>
</div>

---