Horizontally centering widgets

[vars1ty]

How would I go by centering multiple widgets horizontally, on the same row?
I tried horizontal_centered but it didn't actually center it on the same row, instead it started expanding the height of the entire window, and vertical_centered is for stacking widgets on-top of each other.

Code I tried which refuses to center the widgets in the middle, on the same row:

fn draw_ui(&mut self, ctx: &egui::Context, ui: &mut egui::Ui) {
        ui.horizontal_centered(|ui| {
            ui.label("Label 1");
            ui.label("Label 2");
        });
       // ...
}

[cbeck88]

Not an expert, but here's my 2 cents:

It is really hard for egui to center multiple things at a time, because that requires it to know their total size in advance before it starts drawing any of them, but that is not how an immediate mode gui works.

Do you actually need horizontal centering of multiple items?

In a project where I thought I needed this at first, what I did instead was created a columns layout and assigned each item to a column. This looked pretty good and all the items are nicely spaced and centered within their columns.

        TopBottomPanel::bottom("bottom_panel").show(ctx, |ui| {
            ui.columns(4, |columns| {
                columns[0].vertical_centered(|ui| {
                    if ui.button("Assets").clicked() {
                        self.mode = Mode::Assets;
                        worker.stop_quotes();
                    }
                });
                columns[1].vertical_centered(|ui| {
                    if ui.button("Send").clicked() {
                        self.mode = Mode::Send;
                        worker.stop_quotes();
                    }
                });
                columns[2].vertical_centered(|ui| {
                    if ui.button("Swap").clicked() {
                        self.mode = Mode::Swap;
                        worker.get_quotes_for_token_ids(
                            self.swap_to_token_id,
                            self.swap_from_token_id,
                        );
                    }
                });
                columns[3].vertical_centered(|ui| {
                    if ui.button("Offer Swap").clicked() {
                        self.mode = Mode::OfferSwap;
                        worker.get_quotes_for_token_ids(self.base_token_id, self.counter_token_id);
                    }
                });
            });
        });

[ardocrat]

This must be a solution. StripBuilder requires to specify exact height and more complicated.

[TheM1Stery]

You're a lifesaver man. Thanks!

[cbeck88]

There might be a way that you can manually calculate their total width, create a container of that size which is centered, and then add them to the container, but I think it would be painful.