html - 无法在 CSS 中居中一个部分

Question

我在 CSS 中将一个部分居中时遇到问题。如果您需要更多信息，请告诉我。

我已经尝试过 text-align: center;

CSS 代码:

    #example{
        margin: auto;
        max-width: 1000px; 
}

HTML

<section id="example"> 
        <br>
        <hr>
        <div class="icon">
            <img src="Other/icon.png">
            New icon
        </div>

        <hr>
        <br>

        <a href="http://google.com" id="example">
                 <div class="box">
                        <div class="boximg" >
                                <img src="./alt/logo.png">
                        </div>  
                            <div class="text">
                        <p>Logo</p>
                        </div>  
                </div>
            </a>   
</section>

我希望有人能提供帮助。

Answer 1

我建议将该部分包装在 <main> 中标记并应用以下 CSS:

main {
    display: flex;
    justify-content: center;
}

这将使该部分居中，但是您当然可能已经有了一个 <main>标记并且不想将页面的主要部分变成 flexbox。在这种情况下，您可以将 flexbox CSS 应用到您的 <section>然后将所有部分内容包装在一个 div 中。

这是一个主标签作为 flexbox 的例子: https://jsfiddle.net/mywtec07/

这是一个例子，其中的部分是 flexbox，一个 div 包裹着所有的内容: https://jsfiddle.net/6898txaL/1/

---

或者，您可以在不添加任何额外 html 的情况下将部分居中。只需应用以下 CSS:

#example {
    display: block;
    margin: 0 auto;
    width: 300px;
    text-align: center;
}

你可以在这里看到一个例子: https://jsfiddle.net/qxeppj62/1/