我需要在网页上居中 3 <div>

Posted 2023-03-29

【中文标题】我需要在网页上居中 3 <div>

【英文标题】：I need to center 3 <div> on the webpage

【发布时间】：2015-07-22 15:46:00

【问题描述】：

我需要在我的网页中心修复 3 个<div>s。我尝试使用margin: 0 auto;，但它不起作用，即使使用 Bootstrap 的网格。这很复杂，因为无论我做什么，3 <div>s 都不能完全固定在中间。最多有3个按钮，每个按钮下面都有一个段落。

<section class="contenedor">
        <nav>
            <ul><div class="contenedor">
                <li class="col-md-3"><a href="#"><img src="imagenes/icono-1.png"  class="center-block"></a>
                    <p class="boton-textT"> 
                                            RESPONSIVE</p>
                    <p class="boton-textT">WEB DESIGN</p>

                    <p class="boton-text col-md-12 ">
                    We create scalable Internet services.
                    The architecture of the content and 
                    presentation is adapted to the screen
                    size and device type. We create 
                    Responsive Web Design.
                    </p></li>


                <li class="boton2 col-md-3"><a href="#"><img src="imagenes/icono-2.png"  class="center-block"></a>
                    <p class="boton-textT"> 
                                            MOBILE</p>
                    <p class="boton-textT">APPLICATIONS
                    </p>
                    <p class="boton-text col-md-12">
                    We design the user interfaces 
                    of mobile applications. We know the 
                    iPhone users' needs as well as Metro 
                    system's requirements. Developers 
                    respect quality and organization 
                    of our work, clients love it.
                    </p></li>

                <li class="boton3 col-md-3"><a href="#"><img src="imagenes/icono-3.png"  class="center-block"></a>
                    <p class="boton-textT"> 
                    WEB</p>
                    <p class="boton-textT">APPLICATIONS
                    </p>
                    <p class="boton-text col-md-12">
                    We are building UI for web 
                    applications. We understand both: 
                    the strength of trends 
                    and technology constraints. At the 
                    end of the day the user is still the 
                    most important.
                    </p></li>
                    </div>
            </ul>
        </nav>
    </section>

【问题讨论】：

如果我理解正确，您希望三个元素以相等的宽度居中在您的页面上。所以将每一个的宽度设置为 33% 并设置为 inline-block

谢谢！！我已经解决了，删除了 和其他错误。然后我把 " CSS: #nav-container margin: 0 auto; padding-bottom: 50px; " 就完美了！！

【参考方案1】：

1.您的标记有误

您用div.contenedor 包裹了lis，这不是标准做法。请删除它。

2。需要更好地理解引导程序的网格系统。

基本上分为12。如果您想将 3 个项目放在一行并希望它们水平对齐，您需要使用 col-**-4，而不是 -3。

阅读此http://getbootstrap.com/css/#grid 将帮助您更好地理解它。

---

我在这里编辑了你的一些代码 - http://jsfiddle.net/fktkeu9r/

【讨论】：

太真实了！！谢谢！！我已经解决了，删除了 和其他错误。然后我把 " CSS: #nav-container margin: 0 auto; padding-bottom: 50px; " 就完美了！！

【参考方案2】：

网格基于 12：

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

正如所指出的，代码需要清理和验证。

【讨论】：

那是我做的！！谢谢！！我已经解决了，删除了 和其他错误。然后我把 " CSS: #nav-container margin: 0 auto; padding-bottom: 50px; " 就完美了！！

【参考方案3】：

您需要将 CSS 编辑为：

.contenedor 

    margin-left: auto;
    margin-right: auto;
    width: 80%;

【讨论】：

谢谢！！我已经解决了，删除了 和其他错误。然后我把 " CSS: #nav-container margin: 0 auto; padding-bottom: 50px; " 就完美了！！