How to center a particular text or number with css

HTML-CSS
1

Tell us what’s happening:
I want to center my numbers in the table. I have already created a “div” to assign a class “data” and made it “text-align: center” , but nothing is happening.

Your code so far

Your browser information:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Indian Sectors</title>

	<style>
		.data {
			text-align: center;
		}
	 </style>
</head>
<body>
		<table border="5" cellpadding="10" cellspacing="0">
			<caption><b>Share of sectors in GVA at current prices (%)</b></caption>
			<tr>
				<th>Industry</th>
				<th>Sector</th>
				<th>2015-16</th>
				<th>2016-17</th>
				<th>2017-18</th>
			</tr>

			<tr>
				<td>Primary</td>
				<td>Agriculture & allied </td>
				<div class="data">
					<td>17.7</td>
					<td>17.9</td>
					<td>17.1</td>
				</div>
			</tr>

			<tr>
				<td rowspan="2">Secondry</td>
				<td>Industry</td>
				<div class="data">
					<td>29.8</td>
					<td>29.3</td>
					<td>29.1</td>
				</div>
			</tr>

			<tr>
				<td>Manufacturing</td>
				<div class="data">
					<td>16.8</td>
					<td>16.8</td>
					<td>16.7</td>
				</div>
			</tr>

			<tr>
				<td>Tertiary</td>
				<td>Services</td>
				<div class="td">
					<td>52.5</td>
					<td>52.8</td>
					<td>53.9</td>
				</div>
			</tr>
			<tr>
				<td colspan="5" width="550">Sources: Central Statistics Office;<br>Notes: 2nd RE: Second Revised Estimates.</td>
			</tr>




		</table>




	</header>



</body>
</html>
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

I think placing divs inside a table will be ignored by the browser, at least is something I have never seen :slight_smile:

Regardless you should add the class directly to the desired td as:

<td class="data">{}</td>

Or use a css selector to select the desired one and have them centered
(note this is an example)

    td:nth-child(1n + 3) {
      text-align: center;
    }

Hope this helps.