Question

嗨，我是非常新的html和css，我刚开始学习。我想将两个标签放在一起，使它们完全位于页面中间，其中包含所有文本和内容。我几乎得到了它的工作，但部分框有点向左...我不知道如何解决它现在所以我希望你可以帮助:)）

以下是css：

 section{
 text-align: center;
 background-color: #ffffff;
 border-style: dotted;
 float: left;
 width: 45%;
 height: auto;
 padding: 10px;
 margin: 5px;
}

该网站看起来像这样： Site

Answer 1

现代且简单的方法是使用flexbox。你可以通过给一个container-div（或div的任何语义版本，主，文章等）以下属性来做到这一点：

#container {
    display: flex;
    justify-content: center;
}

<div id="container">
    <section>Content</section>
    <section>Content</section>
</div>

取决于您想要做的事情，您也可以使用间隔/空格而不是中心。

https://jsfiddle.net/3qk981mk/1/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

有趣的游戏来学习flexbox技术： http://flexboxfroggy.com/

如果你想以旧学校的方式去做，你可以在容器上使用以下css：

margin: 0 auto;

这将垂直给出0个边距并使内容水平居中。

但是使用flexbox，它真的很酷！

将两个<section>标记居中放在一起

1 个答案: