對齊文字標題獅身人面像

Question

我不能選擇在獅身人面像中對齊圖形的圖例文字。

.. figure:: check_validity.png 
    :align: center 

    .. 

    Left: the source layer 

    Right: in blue the valid layer, in green the invalid layer and in red the error 
    layer 

這個結果：

但我想有兩個標題左對齊。這可能沒有使用表？

Answer 1

是的，但它非常笨拙，需要自定義CSS來說明每個圖像的寬度。

下面是獅身人面像生成我的HTML：根據您的主題

<div class="figure align-center"> 
    <img src="check_validity.png" /> 
    <div class="legend"> 
     <p>Some text</p> 
     <p>Another sentence</p> 
    </div> 
</div> 

，你將需要：

1. 獲得圖像（WI）的寬度
2. 得到內容區域的寬度（WCA），如果它是一個流體，可變寬度區域可能是不可能的
3. 計算左邊距：LM =（WCA-WI）/ 2
4. 將LM用作CSS選擇器的段落塊的左邊距

僅使用表格就容易得多。歡迎來到90年代！

這裏是在reST標記：

.. rst-class:: table-center 

+--------------------------------+ 
| .. figure:: check_validity.png | 
|        | 
| ..       | 
|        | 
| Left: the source layer  | 
|        | 
| Right: in blue the valid  | 
| layer, in green the invalid | 
| layer and in red the error | 
| layer      | 
+--------------------------------+ 

而且你將需要自定義樣式添加到您的CSS文件：

table.table-center { 
    margin-left: auto; 
    margin-right: auto; 
}