Menu
I have simple divs
<div class="ui-bar-a ui-corner-top">
first_test | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a">
sms1 | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a ui-corner-bottom">
sms2 | Status: <img src="templates/style/images/reload.gif" />
</div>
It looks like:
I need it like:
I tried to set margin:auto align="middle", but it did not help
702
Using the float property of CSS will allow you to place an image and text on the same line without breaking the line break. Or Alternatively, you should use the flexbox method of CSS that uses the flex property to make sure that images and lines are aligned in the same line.
Use the align-items property with the "center" value to place the items at the center of the container. Set the justify-content property to "center". Put the image's maximum width to 100% with the max-width property. Set the flex-basis property of the "image" class to specify the initial main size of your image.
Even though the property says “text” align, it affects all elements inside the block-level element that are either inline or inline-block elements. The property only affects the content inside the element to which it is applied, and not the element itself.
try putting
.ui-bar-a img{
vertical-align: middle;
}
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
