Skip to main content
T
Tekin_ire
Participant
April 12, 2022
Question

Cannot center text on fixed height background in responsive: no decimal padding.

  • April 12, 2022
  • 1 reply
  • 343 views

This is odd behaviour.  I have specifications for a button 28px height  with 12px (pt in XD) text.
I make it component to be reused with variations.  To make text flexible I make it reponsive.

Well, the top and bottom paddings are 7 and 6. I cannot center the text.

If it is not responsive I can center text manually and the spacing becomes 6.5 both top and bottom. But in responsive I cannot give decimal point padding. We can not change button sizes just because of this.  Tried it in Figma, it has no issues creating decimal padding. I also played with line height but that doesn't help in XD.

 

 

    This topic has been closed for replies.

    1 reply

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    April 18, 2022

    Hi @Tekin_ire, as you see at this link, decimal values (unless they're used as percentages like width: 49.5%; etc like they say there) are not possible to be used also in CSS: https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected So I suggest you to adjust the button height (increase/decrease by 1px) to have equal paddings for top and the bottom. Hope this helps!

      T
      Tekin_ireAuthor
      Participant
      April 19, 2022

      Yes it is not possible. The problem is our button height is also related to the height of the footer and  header. 1px may break the equal padding there and it may even cause the break of layout as it is coded. We don't know.

      What is difficult is that this is already coded and we are creating XD libraries today.  So there will be discrepency. 
      The text can be centered manually, I think Adobe should really look into this. After I centered manually I should still be able to use responsive text functionality.

      AkinGn
      Community Expert
      AkinGnCommunity Expert
      Community Expert
      April 19, 2022

      Hmm I understand your concern but I don't think it's very likely for a layout to be broken by a 1px difference, as it doesn't create much difference to human eye (even for UI designer folks like us who has very sharp eyes when it comes to spacing) and since in coded version there won't be a decimal padding/margin and there won't be inequal paddings unless they assign different paddings for top and the bottom it's going to be that way anyway. The last/patchy way of solving this is assigning a -1px margin etc to that particular button (I know it's not the best way but it resolves the issue for exceptional cases) to keep the layout in place (but I hardly think so that it's going to be necessary). I'm sure you're going to be able to resolve this by communicating to developers since a tool like XD certainly offers real world applicable features especially in those areas, feel free to keep us updated 😉 Happy designing! 

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices