CSS позиционирование элементов в заголовке

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

Вы хотите выровнять кнопки по верхнему краю изображения? Не понимаете, о чем вы спрашиваете в своем вопросе.

Gurtej Singh 16.11.2018 05:19

Да, в верхней части экрана / там, где верх изображения, но не над ним, просто рядом с ним вот так, но вверху экрана

user3645925 16.11.2018 05:21
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
2
119
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Несколько способов решить эту проблему с помощью CSS. Самый простой способ - использовать vertical-align: top в вашем классе button. Однако я бы порекомендовал вам изучить display: flex. Вертикальное выравнивание намного проще.

Рабочий JSFiddle здесь: http://jsfiddle.net/Lhefbudx/

Надеюсь это поможет.

Другие вопросы по теме