CODEWITHSUNDEEP
imagecenteringxsl-foapache-fopxmltable
Micawber
Micawber

Reputation: 707

xsl fo center a table and an image using display-align="center"

I'm learning xsl:fo and training using the xml example file on w3schools : https://www.w3schools.com/xml/cd_catalog.xml, which I modified a bit to add a "PICTURE" tag.

I parse the file to gather the information of each CD in a table, using xsl:for-each, fo:table and fo:external-graphic. I use display-align="center" for both of them, as suggested in previous questions, and it does not work : images and tables stay aligned on the left.

Here is a code sample (I removed most of the style attributes to make it more readable) :

<xsl:for-each select="CATALOG/CD">              

            <fo:block text-align="center">
                <xsl:value-of select="TITLE"/> - <xsl:value-of select="ARTIST"/>
            </fo:block>

            <fo:block>
                <fo:external-graphic content-height="scale-to-fit" width="2.00in" content-width="2.00in" display-align="center">
                    <xsl:attribute name="src">pictures/<xsl:value-of select="PICTURE"/>.jpg</xsl:attribute>
                </fo:external-graphic>
            </fo:block>

            <fo:table table-layout="fixed" font-family="Helvetica" text-indent="2em" space-before="2em" display-align="center">
                <fo:table-column column-width="4cm"/>
                <fo:table-column column-width="4cm"/>                   
                <fo:table-body>
                    <fo:table-row>
                        <fo:table-cell><fo:block>Country :</fo:block></fo:table-cell>
                        <fo:table-cell><fo:block><xsl:value-of select="COUNTRY"/></fo:block></fo:table-cell>
                    </fo:table-row>
                    <fo:table-row>
                        <fo:table-cell><fo:block>Company :</fo:block></fo:table-cell>
                        <fo:table-cell><fo:block><xsl:value-of select="COMPANY"/></fo:block></fo:table-cell>
                    </fo:table-row>
                    <fo:table-row>
                        <fo:table-cell><fo:block>Price :</fo:block></fo:table-cell>
                        <fo:table-cell><fo:block><xsl:value-of select="PRICE"/></fo:block></fo:table-cell>
                    </fo:table-row>
                    <fo:table-row>
                        <fo:table-cell><fo:block>Year :</fo:block></fo:table-cell>
                        <fo:table-cell><fo:block><xsl:value-of select="YEAR"/></fo:block></fo:table-cell>
                    </fo:table-row>
                </fo:table-body>
            </fo:table>

        </xsl:for-each>

Upvotes: 4

Views: 10927

Answers (1)

Tony Graham
Tony Graham

Reputation: 8068

display-align="center" is for centering vertically (i.e., in the block-progression-direction). See https://www.w3.org/TR/xsl/#display-align. (Also, display-align doesn't apply to fo:table. If you did want to center the table vertically, you'd have to use display-align="center" on the FO that contains the fo:table.)

For left-right centering (in the inline-progression-direction), use text-align="center": see https://www.w3.org/TR/xsl/#text-align

However, text-align doesn't apply to fo:table, so you need to put it on an fo:table-and-caption and put the fo:table as a child of the fo:table-and-caption (and the fo:table-caption is optional). See https://www.w3.org/TR/xsl/#fo_table-and-caption

Upvotes: 3

Related Questions