I have a form where the last line of input fields is followed by 2 image buttons.
No matter what I try I can't seem to horizontally align the buttons with the field.
Here's all the code: http://jsfiddle.net/h3ZPk/
Hold down Shift and use the mouse or touchpad to select the objects that you want to align. Select Shape Format or Picture Format. Select Align. If you don't see Align on the Shape Format tab, select Arrange, and then choose Align.
We need to create a parent element that contain both image and text. After declaring the parent element as flexbox using display: flex; we can align the items to the center using align-items: center;. Example: This example uses flexbox to vertically align text next to an image using CSS.
The text-align property applies to the horizontal placement of the text within the button, not the alignment of the button itself.
Add this rule:
#buttons img, #buttons input {
vertical-align:bottom;
}
jsFiddle example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With