Question

编辑：哦，我尝试了保证金，但是我希望它具有响应性，并且在从不同的屏幕上观看时坚持使用标题

抱歉，这可能是一个简单的问题，但我无法让它工作我试图将文本居中一个矩形，告诉文章在哪个类别中 http://i.imgur.com/J8PkfBa.png

Jsfiddle link http://jsfiddle.net/bwpyypza/

h1 {
    text-align: center;
    font-family: sans-serif;
}
.section {
    background-color: rgb(202, 0, 0);
    padding: 10px;
    margin: 25px;
    color: white;
    display: inline-block;
    text-align: center;
    font-size: 50%;
    letter-spacing: 5px;
    font-family: open-sans;
}

<hr>
    <div class="section">PARENTING</div>
    <h1>Title of the Article</h1>
<hr>

Answer 1

用div分隔您的部分：

<强> HTML

<hr>
<div id="sectionCont">
    <div class="section">PARENTING</div>
</div>
 <h1>Title of the Article</h1>

<hr>

然后使用text-align: center

<强> CSS

#sectionCont {
    text-align: center;
}

fiddle

Answer 2

h1 {
    text-align: center;
    font-family: sans-serif;
}
.section {
    background-color: rgb(202, 0, 0);
    padding: 10px;
    width:200px;
    margin-left:auto;
    margin-right:auto;
    color: white;
    text-align: center;
    font-size: 50%;
    letter-spacing: 5px;
    font-family: open-sans;
}

<hr>
    <div class="section">PARENTING</div>
    <h1>Title of the Article</h1>
<hr>

试试这个

Answer 3

由于您的矩形定义为inline-block，最简单且最一致的是在容器中设置text-align:center：

h1 {
    text-align: center;
    font-family: sans-serif;
}
.section {
    background-color: rgb(202, 0, 0);
    padding: 10px;
    margin: 25px;
    color: white;
    display: inline-block;
    text-align: center;
    font-size: 50%;
    letter-spacing: 5px;
    font-family: open-sans;
}
.container {
    text-align: center;
}

<div class=container>
<hr>
    <div class="section">PARENTING</div>
    <h1>Title of the Article</h1>
<hr>
</div>

Answer 4

所有你需要的是这样的小改动：

h1 {
    text-align: center;
    font-family: sans-serif;
}
.section {
	text-align: center;
}
.section span {
    background-color: rgb(202, 0, 0);
    padding: 10px;
    margin: 25px;
    color: white;
    display: inline-block;
    text-align: center;
    font-size: 50%;
    letter-spacing: 5px;
    font-family: open-sans;
}

<hr>
    <div class="section"><span>PARENTING</span></div>
    <h1>Title of the Article</h1>
<hr>

Answer 5

Modify your css file for following code snippet

.section {
    background-color: rgb(202, 0, 0);
    padding: 10px;
    margin: 25px;
    color: white;
    display: inline-block;
    text-align: center;
    font-size: 50%;
    letter-spacing: 5px;
    font-family: open-sans;
    margin-left: auto;
    margin-right: auto;
}

矩形不居中

5 个答案: