[BUGFIX] Centering images with text is not working in some cases
authorPatrick Broens <patrick@patrickbroens.nl>
Wed, 11 Apr 2012 14:44:46 +0000 (16:44 +0200)
committerSteffen Ritter <info@rs-websystems.de>
Wed, 11 Apr 2012 16:17:29 +0000 (18:17 +0200)
Currently css_styled_content is using the constant MaxW in CSS to define the width of the image wrap. When using columns with different widths, this value is not reflecting the width of the column, which can break the centering.

This patch fixes this issue by using a different centering method.

Fixes: #35814

Change-Id: I2d1532b986054b8ae250d8ce6cab5b67c61a6c5d
Releases: 6.0, 4.7
Reviewed-on: http://review.typo3.org/10256
Reviewed-by: Berit Jensen
Tested-by: Berit Jensen
Reviewed-by: Steffen Ritter
Tested-by: Steffen Ritter
typo3/sysext/css_styled_content/static/setup.txt

index 0a5fa73..88e5d63 100644 (file)
@@ -951,7 +951,18 @@ tt_content.image.20 {
                                        value = noCaption
                                }
                        }
-                       allStdWrap.wrap = <div class="csc-textpic-imagewrap"> | </div>
+                       allStdWrap {
+                               wrap = <div class="csc-textpic-imagewrap"> | </div>
+                               innerWrap.cObject = CASE
+                               innerWrap.cObject {
+                                       key.field = imageorient
+                                       # above-center
+                                       0 = TEXT
+                                       0.value = <div class="csc-textpic-center-outer"><div class="csc-textpic-center-inner"> | </div></div>
+                                       # below-center
+                                       8 < .0
+                               }
+                       }
                        singleStdWrap {
                                wrap = <div class="csc-textpic-image###CLASSES###"> | </div>
                                wrap {
@@ -2137,7 +2148,9 @@ plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE (
        /* Positioning of images: */
 
        /* Center (above or below) */
-       DIV.csc-textpic-center .csc-textpic-imagewrap, DIV.csc-textpic-center FIGURE.csc-textpic-imagewrap { max-width: {$styles.content.imgtext.maxW}px; margin: 0 auto; }
+       DIV.csc-textpic-center .csc-textpic-imagewrap, DIV.csc-textpic-center FIGURE.csc-textpic-imagewrap { overflow: hidden; }
+       DIV.csc-textpic-center .csc-textpic-center-outer { position: relative; float: right; right: 50%; }
+       DIV.csc-textpic-center .csc-textpic-center-inner { position: relative; float: right; right: -50%; }
 
        /* Right (above or below) */
        DIV.csc-textpic-right .csc-textpic-imagewrap { float: right; }