标题中的 CSS 定位元素答案

【问题标题】：CSS Positioning elements in a header标题中的 CSS 定位元素
【发布时间】：2018-11-16 04:05:12
【问题描述】：

所以我正在尝试创建一个导航菜单标题，其中还包含一个徽标，相当简单，但左侧的一些按钮与徽标本身是内联块，它们出现在徽标的底部，根据订单在它的右侧，但在底部，我不确定如何使用 css 让他们到达容器的顶部，或者他们的容器的顶部是否比我想的低？

import React from 'react';
import {Link} from 'react-router-dom';
import { AuthService } from './backend/client/auth';
import { Paper, Button } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
container: {
    'height': 128,
},
leftnav: {
    'display': 'inline-block',
},
rightnav: {
    'float': 'right',

},
button: {
    'display': 'inline-block',
}
});


class Header extends React.Component {
render() {
    const { classes } = this.props;
    return (
        <Paper className={classes.container}>
            <div className={classes.leftnav}>
                <Link to="/" className={classes.button}>
                    <img src="https://imageserver.eveonline.com/Corporation/98523546_128.png" alt="Hole Puncher's Logo"></img>
                </Link>
                <Button component={Link} to="/">
                    Home
                </Button>
                <Button component={Link} to="/store">
                    Browse
                </Button>
                <Button component={Link} to="/contact-us">
                    Contact Us
                </Button>
            </div>
            <div className={classes.rightnav}>
                {AuthService.isAuthed()
                    ? <Button component={Link} to="/account/orders">Account</Button>
                    : ''}
                {AuthService.isAuthed()
                    ? <Button component={Link} to="/login">Login</Button>
                    : <Button onClick={AuthService.logout} component={Link} to="/login"></Button>}
            </div>
        </Paper>
    )
}
}

export default withStyles(styles)(Header);

https://i.imgur.com/OnTjO4l.png

【问题讨论】：

是否要将按钮与图像顶部对齐？对您在问题中提出的内容感到困惑。
是的，在屏幕顶部/图像顶部所在的位置，但不在其上方，就在它旁边，但在屏幕顶部

标签： css reactjs material-ui jss

【解决方案1】：

使用 CSS 解决问题的多种方法。最简单的方法是在 button 类中使用 vertical-align: top。但是，我建议您查看display: flex。垂直对齐更容易。

在这里工作的 JSFiddle：http://jsfiddle.net/Lhefbudx/

希望这会有所帮助。

【讨论】：