HTML/CSS - How can I align something to the centre with things either side?

[pythonmegapixel]

Hi,

 

I have these buttons, which are all within a div:

 

 

What CSS rules do I need to style them so that:

• The "previous", "help" and "print" buttons are aligned to the left of the div
• The text showing the page number is centred
• The "Save" and "Next" buttons are aligned to the right of the div?

Here is the markup for that div if it helps. (Note - the <i> tags are for the icons)

<div>
<button class="buttonPrev buttonPurple">
	<i class="bi-caret-left-fill"></i> Previous
	</button>

<button class="buttonOrange">
	<i class="bi-patch-question-fill"></i> Help
	</button>

<button class="buttonOrange">
	<i class="bi-printer-fill"></i> Print
	</button>
	
	<span class="pageNum">Page 7 of 23</span>
	
<button class="buttonGreen">
	<i class="bi-check2"></i> Save
	</button>
	
	
<button class="buttonNext buttonPurple">
	Next	<i class="bi-caret-right-fill"></i>
	</button>
</div>

 

[Jobgh]

Set these rules to the parent:

display: grid;
grid-template-columns: 1fr 1fr 1fr;

Then, group your elements into three divs. Buttons on first, text on second, buttons on last.

Finally, set:

text-align: center;

On the center div, and set:

text-align: right;

on the last div.

[mikat]

6 minutes ago, Jobgh said:

Set these rules to the parent:

display: grid;
grid-template-columns: 1fr 1fr 1fr;

Then, group your elements into three divs. Buttons on first, text on second, buttons on last.

Finally, set:

text-align: center;

On the center div, and set:

text-align: right;

on the last div.

Pretty good solution, but for smaller screens the grid could be improved to 1fr auto 1fr so the middle div isn't always as large as the outer 2 divs

[pythonmegapixel]

10 minutes ago, Jobgh said:

Set these rules to the parent:

display: grid;
grid-template-columns: 1fr 1fr 1fr;

Then, group your elements into three divs. Buttons on first, text on second, buttons on last.

Finally, set:

text-align: center;

On the center div, and set:

text-align: right;

on the last div.

That worked excellently, thanks. However, in case anyone comes across this and wants to do the same - it's necessary to specify "margin: auto;" on the left, middle and right divs; before I did that they were ever so slightly misaligned vertically, probably because of different padding amounts.

 

 

1 minute ago, mikat said:

Pretty good solution, but for smaller screens the grid could be improved to 1fr auto 1fr so the middle div isn't always as large as the outer 2 divs

I found that "auto 1fr auto" worked better - this is because "1fr auto 1fr" had the irritating side-effect of not expanding the middle div enough, causing a large gap between each edge and the first button, which "auto 1fr auto" didn't.