0

I have a markup like

<div>
    <button>
        <span>Short</span>
    </button>
    <button>
        <span>Long label</span>
    </button>
    <button>
        <span>Medium</span>
    </button>
</div>

buttons should be the same width as div is. Span with longest text must be centered within its button, and others aligned by left side of that(longest) span. Is it possible to achieve only using CSS ? please note that buttons list is dynamic, we can not know widths of spans

howard wolowitz
  • 477
  • 5
  • 21
  • Is the span with the longest text alway the middle one or could it occupy any posiiton in the html? – Adam May 03 '23 at 15:03
  • any position @Adam – howard wolowitz May 03 '23 at 15:06
  • how big is the div? if it's as big as the largest button then it is possible. If not, then there is no way for css to tell which button is the widest and you would need to use whatever server side code you use to create the buttons to add a class to the longest word (could count the characters). Failing that, you would need js to measure the width – Pete May 03 '23 at 15:10
  • @Pete can't grid somehow solve this case/issue ? – howard wolowitz May 03 '23 at 15:11
  • again, css has no way of knowing which button is the longest so how would grid know how to centre only the longest button? – Pete May 03 '23 at 15:12
  • @Pete you are right – howard wolowitz May 03 '23 at 15:14
  • Yep. I don't think there's a pure CSS solution for this. – Adam May 03 '23 at 15:27
  • You may want to have a look at [this topic](https://stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit), it may come closest to what you're trying to achieve. – Al John May 04 '23 at 08:13

0 Answers0