[wp-trac] [WordPress Trac] #58934: Twenty Twelve: Table Block does not align center on front end

[WordPress Trac]

#58934: Twenty Twelve: Table Block does not align center on front end
-----------------------------+----------------------------------
 Reporter:  truptikanzariya  |       Owner:  (none)
     Type:  defect (bug)     |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  Bundled Theme    |     Version:  5.0
 Severity:  normal           |  Resolution:
 Keywords:  needs-patch      |     Focuses:  css, administration
-----------------------------+----------------------------------

Comment (by akrocks):

 Hello @huzaifaalmesbah @truptikanzariya @rajinsharwar,
 After debugging the issue, found that there are some block styles that are
 overwriting the global `aligncenter` style.

 More precisely, block-style contains unnecessary `margin` property on
 front-end & `width` property on editor-end which are not needed & are
 overwriting the global `aligncenter`'s auto margin on fron-end & auto
 `width` on editor-end.



 ==== Detailed Explanation

 ===== Front-end (Reason for broken centre alignment)

 - `margin: 0 0 20px` of block-style is overwriting the `margin-left: auto`
 & `margin-right: auto` of global-style coming from `.aligncenter` class.
 As `margin: 0 0 20px` sets left & right margin to 0, the block remains
 left aligned in spite of the centre aligning the
 block.\\https://drive.google.com/file/d/1wMfdNTBjMYrxh3xgIRSP3gNE7QGeWpVY/view?usp=drive_link

 ===== Editor-end (Reason for broken right alignment)

 - Block-style `width: 100%` cancels out the global-style `float: right`
 coming from `classic.min.css` & due to that block is not able to right
 align
 itself.\\https://drive.google.com/file/d/1JAQhUvJelVvmo6PAomBmGrPd3DE2PWcf/view?usp=drive_link


 - The same happens when we left align the block, block-style `width: 100%`
 cancels out `float: left` global-style & thats why the style seems a
 little off on editor when we left align the block.
     - Front-end:
 https://drive.google.com/file/d/1U3jQMfmiRJEYeHgphYxA5QBCqtknuDF9/view?usp=drive_link
     - Editor-end:
 https://drive.google.com/file/d/1On2lmfNakxdUUYL1S0vjRVpB18X5qzBo/view?usp=drive_link

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58934#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform