Как я могу установить текст по вертикали в боковой панели в html и css - PullRequest
Новая
       6

Как я могу установить текст по вертикали в боковой панели в html и css

0 голосов
/ 23 апреля 2020

Как настроить отображение текста повернутым вертикально и выровненным по нижнему краю на боковой панели. Буду признателен за описательный ответ, описывающий, где я ошибаюсь, и, пожалуйста, предоставьте мне необходимые ресурсы для прояснения понятий, так как я много борюсь с CSS. Я сталкиваюсь с проблемой при повороте текста и выравнивании на боковой панели. 

/* Global Styles */

@media screen and (min-width: 320px){
    html, body{
        height: 100%;
        margin: 0px;
        font-size: 16px;
    }
    body{
        background-image: url("../images/recordMobile.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }

    .sidebar{
        height: 100%;
        width: 4rem;
        position: fixed;
        top: 0;
        right: 0;
        background-color: hsla(0,0%,0%,0.7);
        color: hsla(0,0%,100%,1);
        overflow-x: hidden;
        padding: 0%;
        z-index: 1;
    }

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
    <title>Recor-di-ary</title>
</head>

<body>
    <!-- Main Container -->
    <div class="container">
        <!-- Navigation Container -->
        <div class="nav-container">
            <nav>
                <a href="#">
                    Home
                </a>
                <a href="#">
                    Studies
                </a>
                <a href="">
                    Development
                </a>
                <a href="">
                    Personal
                </a>
            </nav>
        </div>
        <!-- End Navigation Container -->
        <!-- Document head -->
        <div class="head-container sidebar">
            <h1>Recor-di-ary</h1>
        </div>
        <!-- End Document Head -->
    </div>
    <!-- End Main Container -->
</body>

</html>

1 Ответ

1 голос
/ 23 апреля 2020

Попробуйте это - просто используйте преобразование поворота 

/* Global Styles */

@media screen and (min-width: 320px){
    html, body{
        height: 100%;
        margin: 0px;
        font-size: 16px;
    }
    body{
        background-image: url("../images/recordMobile.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
    }

    .sidebar{
        height: 100%;
        width: 4rem;
        position: fixed;
        top: 0;
        right: 0;
        background-color: hsla(0,0%,0%,0.7);
        color: hsla(0,0%,100%,1);
        overflow-x: hidden;
        padding: 0%;
        z-index: 1;
    }
    h1 {
      transform: rotate(90deg);
      white-space: nowrap;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
    <title>Recor-di-ary</title>
</head>

<body>
    <!-- Main Container -->
    <div class="container">
        <!-- Navigation Container -->
        <div class="nav-container">
            <nav>
                <a href="#">
                    Home
                </a>
                <a href="#">
                    Studies
                </a>
                <a href="">
                    Development
                </a>
                <a href="">
                    Personal
                </a>
            </nav>
        </div>
        <!-- End Navigation Container -->
        <!-- Document head -->
        <div class="head-container sidebar">
            <h1>Recor-di-ary</h1>
        </div>
        <!-- End Document Head -->
    </div>
    <!-- End Main Container -->
</body>

</html>
...