即使我使用了“文本对齐：居中”，我也无法对齐我的标题
[英]I can't align my header even though I have used 'text-align: center'
问题描述
Hey there I'm new to html.
嘿，我是 html 的新手。 My problem is that I can't get my h3 heading to align.我的问题是我无法让我的 h3 标题对齐。 The h3 heading is in my body which has css code that centers the body. h3 标题在我的正文中，它具有将正文居中的 css 代码。 It aligns to the left and yet it should align to the center.它向左对齐，但它应该与中心对齐。 I have saved both the html and css file and refreshed my browser.我已经保存了 html 和 css 文件并刷新了我的浏览器。 Here is the html code:这是html代码：
<body>
<h1>
Blessed Be Blessings
</h1>
<p class="width"> Hey there. What's up?</p>
<br>
<h3>Titanium Steel</h3>
<img src="file:C:/Users/Tam/Desktop/1.jpg">
</body>
Here is the css:这是CSS：
body{background-color: powderblue;}
p{color: white;}
body {text-align: center;}
h1 {border: solid 5px; background-color: white;}
h3{border-radius: 30px 30px 30px 30px; padding: 40; width: 200px; background-color: purple;}
5 个解决方案
解决方案1
1 2021-10-19 07:42:46
h3 is a block type tag . h3是块类型标签。 When you use the width , it is aligned to its 200px space but not to the body.当您使用width ，它会与其200px空间对齐，但不会与主体对齐。 So you have to use所以你必须使用
h3 {
margin:0px auto
}
解决方案2
0 2021-10-19 07:37:51
display: inline-block;显示：内联块；
body{background-color: powderblue;} p{color: white;} body {text-align: center;} h1 {border: solid 5px; background-color: white;} h3{border-radius: 30px 30px 30px 30px; padding: 40; width: 200px; background-color: purple;display:inline-block;}
<body> <h1> Blessed Be Blessings </h1> <p class="width"> Hey there. What's up?</p> <br> <h3>Titanium Steel</h3> <br> <img src="https://placekitten.com/640/360"> </body>
解决方案3
0 2021-10-19 07:39:39
You can wrap h3 inside a div and make that div a flexbox.您可以将 h3 包裹在一个 div 中并使该 div 成为一个 flexbox。
Please see below example请看下面的例子
p { color: white; } body { text-align: center; } h1 { border: solid 5px; background-color: white; } h3 { border-radius: 30px 30px 30px 30px; padding: 40; width: 200px; background-color: purple; text-align: center; } .center-h3 { width: 100%; display: flex; justify-content: center; }
<h1> Blessed Be Blessings </h1> <p class="width"> Hey there. What's up?</p> <br> <div class='center-h3'> <h3>Titanium Steel</h3> </div>
解决方案4
0 2021-10-19 07:57:40
Blessed Be Blessings有福有福
Hey there.
嘿。
What's up?
这是怎么回事？
Titanium Steel钛钢
body{background-color: powderblue;} p{ color: white;
身体{背景颜色：粉蓝色；} p{颜色：白色；
} body{ text-align: center;
} 正文{ 文本对齐：居中；
} h1 { border: solid 5px;
} h1 { 边框：实心 5px;
background-color: white;
背景颜色：白色；
} h3 { border-radius: 30px 30px 30px 30px;
} h3 { 边框半径：30px 30px 30px 30px;
padding: 40;
填充：40；
width: 200px;
宽度：200px；
background-color: purple;
背景颜色：紫色；
margin-left: auto;
左边距：自动；
margin-right: auto;
右边距：自动；
}
}
解决方案5
-1 2021-10-19 07:42:20
You can make use of the margin-left property to centre it.您可以使用 margin-left 属性将其居中。
body { background-color: powderblue; text-align: center; } p { color: white; } h1 { border: solid 5px; background-color: white; } h3 { margin-left: 40%;/*This value can be adjusted */ border-radius: 30px 30px 30px 30px; /*padding: 40;*No padding unit provided so it will not make any changes*/ width: 200px; background-color: purple; }
<body> <h1> Blessed Be Blessings </h1> <p class="width"> Hey there. What's up?</p> <br> <h3>Titanium Steel</h3> <img src="file:C:/Users/Tam/Desktop/1.jpg" alt="img"> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.