css - 将容器移动到中心并调整显示 View 的文本

Question

您好，我有 View 显示，它是汽车的显示元素当我使用 class="text-center" 时，我想组织显示的文本将元素移动到中心，但没有像我想要的那样组织。看我的附件

这是代码

<div class="container" style= "word-break: break-all">
        <div class="text-left">                
         <div >
                    <h3>L'id de la voiture est :
                        {{Car.id}}
                    </h3>
                    <h3>
                        Model :
                        {{Car.getModel}}
                    </h3>
                    <h3>nom :
                        {{Car.name}}</h3>
                    <h3>Prix :{{Car.price}}
                    </h3>
                    
                    {% if Car.image.name is defined %}
                        <p>
                            <h3>price :
                                <img width="100px" height="100px" src="{{ asset('pic/')~Car.image.name  }}">
                            </h3>
                        </p>
                    {% else %}
                        <p>
                            <h3>price :</h3>
                            aucune image isérée</p>
                    {% endif %}
                    
                    {% for keyword in Car.keywords %}
                    
                        <p>
                            {{ keyword.name }}
                            {% if not loop.last %},
                            {% endif %}
                        </p>
                    
                    {% endfor %}
                    
                    {% if Car.cities | length > 0 %}
                        <p>
                            {% for city in Car.cities %}
                                <a class="waves-effect waves-light btn">
                                    <i class="material-icons left">
                                        {{ city.name }}</i>
                                </a>
                                {% if not loop.last %}{% endif %}
                            {% endfor %}
                        </p>
                    {% endif %}
                    <a href="{{path('library')}}">Accueil</a>
         </div>
        
        </div>
    </div>

这是我想要的，但位于左侧

我想要这样，但在中心位置没有更改文本

Answer 1

如果我理解正确的话，你想要的是左边的一些偏移

.offset-center {
  margin-left: 50%;
  transform: translateX(-50%);
  min-width: 270px;
}

<div class="container" style="word-break: break-all">
  <div class="text-left offset-center">
    <div>
      <h3>L'id de la voiture est : {{Car.id}}</h3>
      <h3>Model : {{Car.getModel}}</h3>
      <h3>nom : {{Car.name}}</h3>
      <h3>Prix :{{Car.price}}</h3>
    </div>
  </div>
</div>