how would I make text-align behave the same way as if it does to single text if I've to break text to multiple div

Question

I've a long text which I need to text-align center. Parts of it has different styles. So I've to break it into different divs and make display as inline-block. Now the text-align: center behave differently. How would I get the same effect for text-align: center as it would if it is a single text?

.main {
  font-size: 14px;
  width: 320px;
  height: 60px;
  text-align: center;
  line-height: 1.43;
}

.help {
  margin-left: 5px;
  Font-size: 16px;
  display: inline-block;
}

.gt {
  margin-left: 5px;
  display: inline-block;
}

.permissions {
  margin-left: 5px;
  Font-size: 16px;
  display: inline-block;
}

<div className=“ main”>
  <div>only admin can use this page. Press
    <div className=“help”>help </div>
    <div className=“ gt”>></div>
    <div className=“permissions”>permissions</div>
    <div>

Answer 1

Don't use div's to split your text, use span's.

<div>only admin can use this page. Press 
  <span className=“help”>help </span>
  <span className=“gt”>></span>
  <span className=“permissions”>permissions</span>
</div>