在div中对齐图像和标签

Question

我在div中有一个标签和一个图像，充当移动应用中的导航栏。我需要将文本置于中心，将图像置于右侧。我无法获得正确的组合。代码在这里：

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

在课堂上，我有：

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

在c1班，我有：

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

Answer 1

您可以position img absolute并让right:0;向右浮动。要使其垂直居中，只需对您的样式进行以下更改

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

<强> DEMO

注意：margin:auto仅适用于元素的固定width或height。