文本对齐无效

时间:2016-01-26 17:01:36

标签: html css

text-align:center无效。请帮帮我。为什么不起作用?

下面是HTML:

<!DOCTYPE html>
<html>

<head>
   <title>Wheat and Barley</title>
</head>

<body style="font-family:Helvetica;">

     <div style="display:inline-block;">
        <h1 style="font-weight:bold; text-align:center; background-color:blue;">
        Wheat
        </h1>
     </div>
     <p>Wheat is a cereal grain...</p>
     <p>This grain...</p>
</body>

</html>

4 个答案:

答案 0 :(得分:1)

使用中心标记

像这样围绕div -

<center><div> ... </div></center>

它有效,颜色只会留在文字后面!它也会居中!

感谢。

答案 1 :(得分:1)

文本对齐工作正常,但显示内联块元素就像内联元素,但它们可以具有宽度和高度。 如果没有将div的宽度指定为与文本一样宽。

只需删除内联块,div元素已经是显示块。

num_selected

如果可能,请不要使用inlene CSS,而是使用外部文件。以供参考: http://www.w3schools.com/css/css_howto.asp

答案 2 :(得分:1)

您可以将宽度:100%添加到h1样式,并可以删除div ..

<!DOCTYPE html>
<html>

<head>
   <title>Wheat and Barley</title>
</head>

<body style="font-family:Helvetica;">

    <div><h1 style="font-weight:bold; text-align:center; background-color:blue;">Wheat</h1></div>

     <p>Wheat is a cereal grain, originally from the Levant region of the Near East but now cultivated worldwide. In 2013, world production of wheat was 713 million tons, making it the third most-produced cereal after maize (1,016 million tons) and rice (745 million tons). Wheat was the second most-produced cereal in 2009; world production in that year was 682 million tons, after maize, and with rice as a close third.</p>

     <p>This grain is grown on more land area than any other commercial food. World trade in wheat is greater than for all other crops combined. Globally, wheat is the leading source of vegetable protein in human food, having a higher protein content than other major cereals, maize (corn) or rice. In terms of total production tonnages used for food, it is currently second to rice as the main human food crop and ahead of maize, after allowing for maize's more extensive use in animal feeds. The archaeological record suggests that this first occurred in the regions known as the Fertile Crescent.</p>



 </body>

</html>

这是JSFIDDLE

编辑:

你想这样吗?只需检查更新JSFIDDLE

答案 3 :(得分:-1)

感谢迄今为止回答这个问题的所有人。 @ HMGtbOfficial的帖子在所有其他人中证明是最有帮助的。根据他的建议,我将<div>置于中心位置。希望这有效!一个大而肥胖的感谢他。谢谢你帮助我!

我重写了HTML代码:

<!DOCTYPE html>
<html>

<head>
   <title>Wheat and Barley</title>
</head>

<body style="font-family:Helvetica;">

     <div style="display:inline-block; text-align:center;">
        <h1 style="font-weight:bold; background-color:blue;">
        Wheat
        </h1>
     </div>
     <p>Wheat is a cereal grain...</p>
     <p>This grain...</p>
</body>

</html>