I've encountered various methods to align text or an image to the right, but I'm having trouble aligning a basic avatar with some text. It used to work before I switched to material-ui-next, and now I can't seem to get them aligned properly. What I currently have is:
https://i.stack.imgur.com/35QxX.png
However, I want Text1 on the left (as it is) and Text2 and the Avatar next to each other, both aligned to the right in the same line.
Below is the render code I've tried so far; it has gone through multiple variations, including using <li>, although I'm not sure if it's necessary in this case.
This is the render for the top container:
render() {
return (
<div className="main-container">
<div className="links-container">
<div className="logo-container">Text1</div>
<div className="right-links-container">
<ul className="right-list-container">
<li><a href="">Text2</a>
</li>
<li><AccountInfo />
</li>
</ul>
</div >
</div>
</div>
);
}
}
This is the render for the avatar:
render() {
return (
<div className="profile-container">
<Avatar
src="https://www.shareicon.net/data/2016/08/05/806962_user_512x512.png"
size={30}
onClick={this.handleAvatarClick}
/>
<Popover
open={this.state.showMenu}
anchorEl={this.state.anchorEl}
anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
onRequestClose={this.handleCloseAccountInfoMenu}
>
<MenuList role="menu">
<MenuItem >My account</MenuItem>
<MenuItem >Logout</MenuItem>
</MenuList>
</Popover>
</div>
);
}
And here's the CSS:
.main-container {
margin-top: 10px;
margin-bottom: 10px;
width: 100%
}
.links-container {
margin: 15px;
text-align: right;
}
.logo-container {
float: left;
}
.right-list-container a {
text-decoration:none;
}
.right-list-container li:nth-child(1) {
text-decoration:none;
height:30px;
display:block;
background-position:right;
padding-right: 15px;
}
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
.accountinfo-menu {
width: 200px;
}
.profile-container {
clear: both;
vertical-align: middle;
display: inline;
}
I feel like I might be overcomplicating things and that it should be simpler. Any suggestions on how to achieve the desired layout? Thank you!