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;
}
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;
}
NOTE: margin:auto
works only with either fixed width
or height
to your element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.