Vertically centering label text in a button

Learn
1

I have two buttons in a pop-up window that allows for some data entry. I would like the labels on both buttons to be centered both vertically and horizontally. My AI seems confused about the problem, so I’m posting here to see if I can get some help. Here’s a snippet of the problem code:

        let submit_button = button(
            center(
                rich_text::<(), _, _, _>(vec![
                    span("Add")
                ])
            )
                .width(Length::Fixed(80.0))
                .height(Length::Fixed(40.0))
        )
            .on_press(Message::FormSubmitted)
            .padding(10);

        let cancel_button = button(
            center(
                rich_text::<(), _, _, _>(vec![
                    span("Cancel")
                ])
            )
                .width(Length::Fixed(80.0))
                .height(Length::Fixed(40.0))
        )
            .on_press(Message::ToggleForm)
            .padding(10);

I would also like the label to be bold, so that’s why the rich_text function is included in the code, although I haven’t yet tried to actually apply the bold feature to the text. When I run this snippet, the label sits on the bottom border of the button. Any ideas as to how I can fix this? Thanks.

BTW, I’m using version 0.14.0 of Iced.

2

Hi, @jtreagan.

I am not sure if that’s enough, but the following code works for me with 0.14.0.
If you needed only vertical alignment, center_y() would suffice (instead of center()).

From you example I just removed the rich_text() and span() elements.

let submit_button = button(
            center("Add")
                .width(Length::Fixed(80.0))
                .height(Length::Fixed(40.0))
        )
            .on_press(Message::FormSubmitted)
            .padding(10);

        let cancel_button = button(
            center("Cancel")
                .width(Length::Fixed(80.0))
                .height(Length::Fixed(40.0))
        )
            .on_press(Message::ToggleForm)
            .padding(10);