Fix text in center using Table with panel


Topic: Fix text in center using Table with panel

rashesh patel asked 6 years ago

Hi, While I am using 'Table with panel' of react,heading text of the table is not fix in center. when I am using buttons in the same header it affects the text alignment it moves right or left . What should I do to fix the Heading text in the center?? please refer below link

https://wetransfer.com/downloads/97f53a1b3878d36477a76b964c36d8ce20190401045014/3d9af5cb18f5b2850ab532fe6ba108e820190401045014/92094a/preview/19c0c041f5689fc0ab9641dd739617fe20190401045014


Aliaksandr Andrasiuk staff answered 6 years ago

Hello,

This behavior because of all elements in the container div(panel) are positioned according to the class "justify-content-between". In this case, we have only two divs so tag ''a" always will be positioned in the center between left side 'div' and right side 'div'. In your case the right side smaller than the left side and "a" closer to the right side.

One of the options to solve this problem is to add style "position: relative" to the "panel" and to add styles "position: absolute; left: 50%; transform: translateX(-50%);" to the "a" tag. So "a" always be positioned in the middle of the panel. Here is the example:

<MDBCardHeader 
    className="view view-cascade gradient-card-header blue-gradient d-flex justify-content-between align-items-center py-2 mx-4 mb-3"
    style={{ position: "relative" }}
>
....
<a 
    href="#!" 
    className="white-text mx-auto" 
    style={{ position: "absolute";  left: "50%"; transform: "translateX(-50%)"; }}
 >
    Table name
 </a>
    ...
</MDBCardHeader>

Best regards,

Aliaksandr from MDB.


rashesh patel commented 6 years ago

Thank you for detailed explanation Aliaksandr... it works :)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.11.1
  • Device: LAPTOP
  • Browser: CHROME
  • OS: WINDOWS 10
  • Provided sample code: No
  • Provided link: Yes