How to use margin/padding on text-align centered element

Question

HTML

<div>Test</div>

CSS

div {
text-align: center;
width:200px;
margin-left:20px;
}

I don't want to have the text at center but pushed slightly right/left. Is this possible?

Answer 1

It is possible. Currently your margin-left property will affect the div and does not specifically target the inner text.

I would do something like the following. If you surround the text in a <p> tag you can offset it to the left or right by using padding.

div {
  text-align: center;
  width:200px;
  background:blue;
}
div p{
  padding-left:30px;
}

<div>
   <p>Test</p>
</div>

Answer 2

If it's a single line you should be able to do this:

 text-indent:1em;

ref: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Answer 3

If you use padding on one side, it will offset the text visually by whatever you set it to. What you have listed would work, as would using padding instead of a margin, but it depends on what the site looks like visually.