CODEWITHSUNDEEP
htmlcss
Soha Farhin Pine
Soha Farhin Pine

Reputation: 325

The text align is not working

The text-align:center is not working. Please help me out. Why is it not working?

That's the HTML below:

<!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>

Upvotes: 0

Views: 129

Answers (4)

monkfromearth
monkfromearth

Reputation: 86

Make use of center tag

Surround the div like this -

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

It works, the color will stay behind the text only! Also it'd be centered!

Thanks.

Upvotes: 1

Soha Farhin Pine
Soha Farhin Pine

Reputation: 325

Thanks to everybody who has so far answered this question. @HMGtbOfficial's post proved most helpful among all others. As per his suggestion, I put the <div> in the center. Hopefully, this works! A big, fat thanks to him. Thanks for helping me out!

I rewrote the HTML code as such:

<!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>

Upvotes: -1

Dr M L M J
Dr M L M J

Reputation: 2397

You can Add width:100% to h1 style and can remove div..

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

Here is JSFIDDLE

EDIT :

Do you want like this ? Just Check Updated JSFIDDLE

Upvotes: 1

Germano Plebani
Germano Plebani

Reputation: 3625

Text align work fine, but display inline-block elements are like inline elements but they can have a width and a height. If you don't assign width the div as wide as the text.

Simply remove inline-block, div element is already display block.

<!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>

If possible don't use inlene CSS but in external file. For reference: http://www.w3schools.com/css/css_howto.asp

Upvotes: 1

Related Questions