In Anqi CMS template, how to center the product title within a fixed area?

In Anqi CMS template, centering the product title within a fixed area is a common layout requirement, which can effectively enhance the visual beauty and user experience of the website.Due to the adoption of a template engine syntax similar to Django by Anqi CMS and good support for front-end styles, we can achieve this goal by combining HTML structure and CSS styles.

Understand the structure of Anqi CMS template

Firstly, we need to clarify how the product title is called in the Anqin CMS template. The Anqin CMS template files are usually located/template/你的模板名称/Under the directory. You may find the title call inproduct/detail.htmlor a similar template file; for the product list page, it may be inproduct/list.htmlorarchive/list.htmlIn, call each product title through the way of loop traversal.

The acquisition of product titles usually usesarchiveDetailTags to get the details of a single product, or use it in a list loop.item.TitleTo get the title of the current product. For example:

• Title of a single product: <h1>{% archiveDetail with name="Title" %}</h1>
• Title in the product list: <h2>{{item.Title}}</h2>

Our goal is to make these title contents centered within their respective HTML containers.

The core CSS method to achieve text centering.

To achieve text centering, the most direct and commonly used CSS property istext-align: center;. This property will center all inline content within the container (such as text, images,<span>Align horizontally. For block-level elements (such asdiv,h1,p), if they need to be centered horizontally themselves, it is usually necessary to set a clear width for them and usemargin: 0 auto;Property. But for the text content of the title to be centered,text-align: center;usually is enough.

Apply the centering style in Anqi CMS template

Next, we will introduce how to apply these CSS styles in specific template scenarios.

1. Center the title on the product details page

Assuming your product details page template file is/template/你的模板名称/product/detail.htmlIn this file, you will find the HTML tags used to display product titles, such as one<h1>.

Method one: Add inline styles directly (suitable for quick tests or specific cases)

Find your title tag and add it directlystyle="text-align: center;"Property.

{# 假设这是你的商品详情页标题区域 #}
<div class="product-header">
    <h1 style="text-align: center;">{% archiveDetail with name="Title" %}</h1>
</div>

The advantage of this method is that the modification is intuitive and takes effect immediately. However, the disadvantage is that the style is coupled with the content, which is not conducive to later maintenance and global modification.

Method two: Control through CSS class (recommended, more maintainable)

Firstly, add a CSS class to the title tag, for exampleproduct-title-centered.

{# 假设这是你的商品详情页标题区域 #}
<div class="product-header">
    <h1 class="product-title-centered">{% archiveDetail with name="Title" %}</h1>
</div>

Then, define the style of this class in your CSS file. The static resource files of Anqi CMS are usually stored in/public/static/Under the directory, your template may have its own CSS file, such as/public/static/你的模板名称/css/style.cssor an independentcustom.cssfile.

Open the corresponding CSS file and add the following style rules:

/* 在你的CSS文件中添加 */
.product-title-centered {
    text-align: center; /* 使标题文本内容水平居中 */
    /* 如果你的标题h1元素本身需要固定宽度并在父容器中居中，可以添加以下样式 */
    /* width: 80%; */
    /* margin: 0 auto; */
}

Make sure your template (usually)base.htmlhas correctly imported your CSS file, for example:<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">

2. Display the title in the center of the product list page

For the product list page, you need to find the HTML structure of looping through products and apply the same center alignment style to each product's title element.

Assuming your product list page template file is/template/你的模板名称/product/list.htmland you usearchiveListtag for looping.

Control through CSS class (recommended)

Within your product loop, find the tag that displays the product title and add a CSS class to it, for exampleproduct-list-title-centered.

{# 假设这是你的商品列表页循环区域 #}
{% archiveList archives with moduleId="你的商品模型ID" type="page" limit="10" %}
    {% for item in archives %}
    <div class="product-item">
        <h2 class="product-list-title-centered">{{item.Title}}</h2>
        {# 其他商品信息，如图片、价格、描述等 #}
    </div>
    {% empty %}
    <p>没有找到相关商品。</p>
    {% endfor %}
{% endarchiveList %}

Then, add the corresponding style rules in your CSS file:

/* 在你的CSS文件中添加 */
.product-list-title-centered {
    text-align: center; /* 使列表中的每个商品标题文本内容水平居中 */
}

Handle special cases and optimization suggestions

1. Display issue of long title:Sometimes the product title may be too long, and it may cause line breaks or overflow after center alignment. You can use CSS'swhite-space: nowrap; overflow: hidden; text-overflow: ellipsis;Force the title to display on one line and automatically truncate.

   .product-title-centered, .product-list-title-centered {
       text-align: center;
       white-space: nowrap;      /* 防止文本换行 */
       overflow: hidden;         /* 隐藏超出容器的文本 */
       text-overflow: ellipsis;  /* 显示省略号 */
   }
   

   Or, you can also use the string truncation filter provided by Anqi CMS directly in the template, for example{{item.Title|truncatechars:30}}Limit the number of characters in the title.

2. Responsive design:Considering the screen size of different devices, you may want the title to be left-aligned on small screens and centered on large screens.This can be achieved through CSS media queries.