Html 矩形不'；t中心

编辑：哦，我尝试了页边空白，但我希望它能做出响应，并且在从不同屏幕查看时能与标题保持一致

对不起，这可能是一个简单的问题，但我无法让它工作 我试图将文本居中放置在一个矩形中，告诉您文章属于哪个类别

JSFIDLE链路

h1{
文本对齐：居中；
字体系列：无衬线；
}
.科{
背景色：rgb（202,0,0）；
填充：10px；
利润率：25px；
颜色：白色；
显示：内联块；
文本对齐：居中；
字体大小：50%；
字母间距：5px；
字体系列：开放式SAN；
}

养育
文章标题

由于矩形被定义为

内联块

，最简单、最一致的方法是在容器中设置

文本对齐：居中

：

h1{
文本对齐：居中；
字体系列：无衬线；
}
.科{
背景色：rgb（202,0,0）；
填充：10px；
利润率：25px；
颜色：白色；
显示：内联块；
文本对齐：居中；
字体大小：50%；
字母间距：5px；
字体系列：开放式SAN；
}
.集装箱{
文本对齐：居中；
}

养育
文章标题

将您的部分用以下内容换行：

html

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

<hr>

h1{
文本对齐：居中；
字体系列：无衬线；
}
.科{
背景色：rgb（202,0,0）；
填充：10px；
宽度：200px；
左边距：自动；
右边距：自动；
颜色：白色；
文本对齐：居中；
字体大小：50%；
字母间距：5px；
字体系列：开放式SAN；
}

养育
文章标题

您所需要的只是像这样的小改动：

h1{
文本对齐：居中；
字体系列：无衬线；
}
.科{
文本对齐：居中；
}
.截面跨度{
背景色：rgb（202,0,0）；
填充：10px；
利润率：25px；
颜色：白色；
显示：内联块；
文本对齐：居中；
字体大小：50%；
字母间距：5px；
字体系列：开放式SAN；
}

养育
文章标题

并从cssIt中删除边距：25px按钮不居中：/多谢，我希望我能给每个人一个向上投票的机会，但我仍然没有这样做的声誉so@ekclone使用此解决方案，矩形宽度不会根据文本大小自动计算，这意味着您必须手动设置每个矩形的大小，如果你改变字体，它就会坏掉…@dystroy是的，我也注意到了，所以我完全删除了字体系列

#sectionCont {
    text-align: center;
}

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;
}