Центр текста в CSS - PullRequest
Новая
       20

Центр текста в CSS

0 голосов
/ 06 мая 2019

Я пытался изучать CSS раньше, и я ВСЕГДА зацикливаюсь на частях компоновки CSS и прочее, я пытаюсь воссоздать веб-сайт для практики / обучения

Вещи, которые я пробовал 

.gmod-title {
    text-align: center;
}

h1 {
    font-size: 25px;
    color: #1295F0;
    text-shadow: -2px -2px 0 #fff,2px -2px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px 2px 6px rgba( 0,0,0,0.3 );
}


.gmod-title {
}

h1 {
    font-size: 15px;
    margin: auto 0;
    color: #1295F0;
    text-shadow: -2px -2px 0 #fff,2px -2px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px 2px 6px rgba( 0,0,0,0.3 );
}

весь мой текущий код https://jsfiddle.net/Luayfkhz/

Мне трудно понять, как центрировать фрагмент текста.

Я бы хотел знать, почему ваш ответ сработал, спасибо

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

Я предполагаю, что вы хотите получить заголовок "Garry's Mod Wiki", который будет центрирован по всей странице.

Я добавил ссылку jsfiddle, в которой я использовал ваш код для центрирования заголовка.

Я добавил center-title класса к вашему тегу h1.Я думаю, что это должно решить вашу проблему 

        <div class="gmod-title center-title">
            <h1>Garry's Mod Wiki</h1>
        </div>

<style>
    .center-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

</style>

jsiddle Ссылка: https://jsfiddle.net/SJ_KIllshot/104ghstn/

0 голосов
/ 06 мая 2019

Вы должны рассмотреть возможность использования flexbox, вы можете найти более подробную информацию здесь .

Я отредактировал вашу скрипку с помощью flex, и она сработала так, как вы хотите, как вы можете видеть из фрагмента ниже: 

/*Side panel*/

* {
    font-family: sans-serif;
    color: #fff;
    padding: 0;
    margin: 0;
    border-color: none;
    border: none;
}

.side-panel {
    background-color: #373737;
    height: 100vh;
    width: 300px;
    float: left;
}

.side-panel .docs li {
    font-size: 17px;
    font-weight: 600;
    margin-left: 5%;
    list-style: none;
}

#search {
    margin-top: 2%;
    margin-bottom: 3%;
    padding-left: 5px;
    color: #333;
    min-width: 220px;
    height: 26px;
    margin-left: 3%;
    border-radius: 5px 0 0 5px;
    border-color:transparent;
}

#search-btn {
    background-color: #aaa;
    border-radius: 0 5px 5px 0;
    height: 26px;
    min-width: 60px;
    margin: 0;
}

.wiki {
display: flex;
flex-direction: column;
}

.links {
    list-style: none;
}

.links li {
    color: #aaa;
    font-size: 11px;
    float: left;
    margin-top: 1px;
    margin-left: 7px;
}

.gmod-title {
    display: flex;
}

h1 {
    margin: auto;
    font-size: 55px;
    color: #1295F0;
    text-shadow: -2px -2px 0 #fff,2px -2px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px 2px 6px rgba( 0,0,0,0.3 );
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Garry's Mod</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

        <div class="side-panel">
            <input placeholder="Search" type="text" id="search"><input type="button" value="Search" id="search-btn">
            <ul class="docs">
                <li>Hooks</li>
                <li>Libraries</li>
                <li>Global</li>
                <li>Classes</li>
                <li>Panels</li>
                <li>Reference</li>
            </ul>
        </div>
        <div class="wiki">
            <ul class="links">
                <li>Home</li>
                <li>Changelist</li>
                <li>Page</li>
                <li>Discussion</li>
                <li>View source</li>
                <li>History</li>
            </ul>
            <div class="gmod-title">
                <h1>Garry's Mod Wiki</h1>
            </div>
        </div>
        
    </body>
</html>
<!--#aaa-->

<!--
...