使用css命令段落不会居中
使用css命令段落不会居中
提问于 2019-12-17 06:04:10
嘿，我很困惑，因为我试图居中一个段落，例如，它不会做任何我尝试的文本-对齐，对齐中心，内联块等。
HTML `
<div class="col-md-6 col-sm-12 picText1">
<p style="background-color:#77b97a;" class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>`CSS
.picText{
color: black;
border-radius: 20px 20px 20px 20px;
width: 150%;
height: 75px;
padding-top: 2%;
position: relative;
text-align: center;
left: 26%;
}我也试过使用bootstrap命令，希望有人能澄清，因为它有时可以处理文本对齐等等，但我已经在它周围设置了边框，看起来它什么也做不了
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-17 06:10:11
您不需要定位样式来使段落居中。您可以简单地指定元素的宽度，然后将其边距设置为0 auto，这将使其顶部和底部的边距为0，并将自动使用正确的左右边距，使元素在给定其框模型和父容器的宽度时居中。
.container {
width: 100%;
}
.picText {
background-color: #77b97a;
border-radius: 20px 20px 20px 20px;
padding: 2%;
text-align: center;
width: 50%;
margin: 0 auto;
}<div class="container">
<p class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>
Stack Overflow用户
发布于 2019-12-17 06:18:22
使用bootstrap时，我使用了一个容器，并使用justify-content-center将其居中，在我看来，这比编写css规则更简单。您可以将您的图像添加到容器内，它们都将居中。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container col-md-6 justify-content-center w-50">
<p class="bg-info rounded-lg p-2 mt-3">
Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.
</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59364923
复制相关文章
相似问题
腾讯云开发者
