在div中对齐图像和标签

Question

I have a label and an image in a div which acts as a navbar in a mobile app. I need the text to be centred and the image to be on the right. I can't manage to get the right combination. Code here:

<div data-role="header">
    <div class="centered">
         <img src="../images/culogo50x40.png" alt="logo" height="25px" class="c1">
         <h3>Login</h3>
    </div>
</div>

In class centred, I have:

.centered { 
width: 100%;
height: auto; 
position: fixed; 
top: 20%; 
background-color: red;
text-align:center; 
-webkit-backface-visibility: hidden;
}

and in class c1, I have:

img.c1 {
    float: right;
    display: inline;
}

Answer 1

You can position your img absolute and make the right:0; to float it right. To make it vertical middle just make the following changes to your style

img.c1 {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

DEMO

NOTE: margin:auto works only with either fixed width or height to your element.