Question

我以前尝试过学习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/

我很难弄清楚如何使一段文本居中。

我想知道为什么你的答案也能奏效，谢谢

Answer 1

您应该考虑使用flexbox，您可以找到更多信息here。

我已经使用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-->

<!--

Answer 2

我猜您想获得的标题是“加里的Mod Wiki”，该标题将在整个页面中居中。

我添加了一个jsfiddle链接，其中已使用您的代码使标题居中。

我已经将class 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/

CSS中的文字居中

2 个答案: