Question

我需要在我的网页中心修复3个<div>。我尝试使用margin: 0 auto;，但即使使用Bootstrap的网格，它也无法工作。它很复杂，因为无论我做什么，3 <div>都不能完全解决中间问题。最常见的是3个按钮，每个按钮下面都有一个段落。

<section class="contenedor">
        <nav>
            <ul><div class="contenedor">
                <li class="col-md-3"><a href="#"><img src="imagenes/icono-1.png" alt="responsive" 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" alt="mobile" 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" alt="web" 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>

Answer 1

网格基于12：

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

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

Answer 2

<强> 1。你的加分是错误的

你用li包裹了div.contenedor这不是标准做法。请删除它。

<强> 2。需要更好地了解bootstrap的网格系统。

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

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

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

Answer 3

您需要将CSS编辑为：

.contenedor 
{
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

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

3 个答案: