Итак, я пытаюсь создать заголовок навигационного меню, и он также включает в себя логотип, довольно простой, но некоторые из кнопок с левой стороны являются встроенными блоками с самим логотипом, и они появляются внизу логотипа, чтобы справа от этого на основе порядка, но внизу, и я не уверен, как с помощью 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);
Да, в верхней части экрана / там, где верх изображения, но не над ним, просто рядом с ним вот так, но вверху экрана






Несколько способов решить эту проблему с помощью CSS. Самый простой способ - использовать vertical-align: top в вашем классе button. Однако я бы порекомендовал вам изучить display: flex. Вертикальное выравнивание намного проще.
Рабочий JSFiddle здесь: http://jsfiddle.net/Lhefbudx/
Надеюсь это поможет.
Вы хотите выровнять кнопки по верхнему краю изображения? Не понимаете, о чем вы спрашиваете в своем вопросе.