Я пишу это и использую загрузчик 4 для размещения элемента на странице:
<div class="row justify-content-center container">
<div class=" col-md-8 col-xs-8 col-lg-8 col-xl-8 col-sm-12 p-0">
<div class="row justify-content-center col-md-12 col-xl-12 col-lg-12 col-sm-12 p-0">
<div class="col-md-4 col-sm-4 col-xl-4 col-lg-4">
<label>کد خبر : {{newModel.id}}</label>
</div>
<div class="col-md-4 col-sm-4 col-xl-4 col-lg-4">
<label>تاریخ نوشتن خبر : 28/02/1397</label>
</div>
<div class="col-md-4 col-sm-4 col-xl-4 col-lg-4">
<label>نویسنده خبر :{{newModel.writerName}}</label>
</div>
</div>
<div class="col-md-4 col-xs-4 col-sm-12 col-xl-4 col-lg-4 p-0 ">
<div class="title col-md-12 col-xl-12 col-lg-12 col-sm-12 p-2 mt-1 rounded">
<fa-icon [icon]="faPowerOff" class="right"></fa-icon>
<span class="pr-2">پر بازدید ترین خبر ها</span>
</div>
<div class="mostviewcontent col-md-12 col-xl-12 col-lg-12 col-sm-12 mt-1 rounded">
<ul class="p-0">
<li *ngFor="let item of mostview" routerLink="/home/detail/{{item.id}}">
<fa-icon [icon]="faCircle" class="icon"></fa-icon>
<span>
{{item.title}}
</span>
</li>
</ul>
</div>
</div>
<div class="row col-md-12 col-xl-12 col-lg-12 col-sm-12 p-0">
<nz-divider id="diver" nzText=" خبر های مشابه"></nz-divider>
<div class=" similar col-md-3 col-xs-3 col-lg-3 col-xl-3 col-sm-12 " *ngFor="let item of similarNews">
<div>
<app-image [ImagePath]="item.imagePath" id="detail-img"></app-image>
</div>
<div>
<label class="mt-1 lbl-sim">
{{item.title}}
</label>
</div>
</div>
</div>
, но когда я использую класс row
в HTML-коде, все элементыразмещается справа от страницы, и в левой части страницы создается пустое место.Если мне нужно, чтобы элементы были точно посередине страницы.
я использую это <html dir="rtl">
![Problem Image](https://i.stack.imgur.com/HCT1d.png)
В чем проблема ????Как я могу решить это ??