Question

我的目标是创建一个导航栏，在屏幕顶部水平完美居中，左上角有一些文字。

我已经看到很多关于横向居中的问题/解决方案，但我想了解我如何能够忽略＆＃39;我尝试居中而不是使用剩余可用空间的左侧或右侧的元素。

＆＃13;

cmd.Parameters.AddWithValue("@nameQuery", nameQuery);

＆＃13;

body {
    font-size: 1rem;
    margin: 0;
}

.centerable {
    float: left;
    position: relative;
    top: .5rem;
    width: 80%;
}

h3 {
    color: darkslategray;
    display: inline;
    float: left;
    font-size: 2rem;
    margin: 5px 0;
}

li {
    background-color: slategray;
    border: slategray solid .2rem;
    border-radius: .1rem;
    color: white;
    float: left;
    list-style-type: none;
    margin: -.1rem;
    padding: .5rem .5rem;
    position: relative;
    right: 50%;
}

ul {
    float: left;
    left: 50%;
    margin: 0;
    padding: 0;
    position: relative;
}

#topbar {
    background-color: #fff2ee;
    box-shadow: 1px 2px #DBCFCB;;
    font-family: 'IBM Plex Mono', monospace;
    overflow: auto;
    padding: 10px 5px;
    text-align: center;
}

＆＃13;

Answer 1

您可以使用绝对位置将h3元素从文档流中取出。如果它不在文档流程中，则不会对其余元素的居中产生任何影响。

Answer 2

希望这会对你有所帮助

＆＃13;

body {
    font-size: 1rem;
    margin: 0;
}

.centerable {
    position: relative;
    top: .5rem;
    overflow: hidden;
}

ul {
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
}

li {
    background-color: slategray;
    border: slategray solid .2rem;
    border-radius: 0;
    color: white;
    float: left;
    list-style-type: none;
    padding: .5rem .5rem;
    position: relative;
}

h3 {
    color: darkslategray;
    display: inline;
    float: left;
    font-size: 2rem;
    margin: 5px 0;
}



#topbar {
    background-color: #fff2ee;
    box-shadow: 1px 2px #DBCFCB;;
    font-family: 'IBM Plex Mono', monospace;
    overflow: auto;
    padding: 10px 5px;
    text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>See Your Code</title>
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
    <link href="divided.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div id="topbar">
        <h3>Code Writer</h3>
        <div class="centerable">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Display</li>
        </ul>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div class="divider">
    </div>
    <div class="divider"></div>
    <div class="divider"></div>
    <div class="divider"></div>
</body>
</html>

＆＃13;

Answer 3

我希望这个答案对你有所帮助

body {
    font-size: 1rem;
    margin: 0;
}

.centerable {
    float: left;
    position: relative;
    top: .5rem;
    width: 80%;
}

h3 {
    color: darkslategray;
    display: inline;
    float: left;
    font-size: 2rem;
    margin: 5px 0;
}

li {
    background-color: slategray;
    border: slategray solid .2rem;
    border-radius: .1rem;
    color: white;
    float: left;
    list-style-type: none;
    margin: -.1rem;
    padding: .5rem .5rem;
    position: relative;
    right: 50%;
}

ul {
    float: left;
    left: 50%;
    margin: 0;
    padding: 0;
    position: relative;
}

#topbar {
    background-color: #fff2ee;
    box-shadow: 1px 2px #DBCFCB;;
    font-family: 'IBM Plex Mono', monospace;
    overflow: auto;
    padding: 10px 5px;
    text-align: center;
}
.centerable{
    position:fixed;
    margin: auto;
    width: 100%;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>See Your Code</title>
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
    <link href="divided.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div id="topbar">
        <div style="margin-top:50px;"><h3>Code Writer</h3></div>
        
        <div class="centerable">
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>Display</li>
            </ul>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div class="divider">
    </div>
    <div class="divider"></div>
    <div class="divider"></div>
    <div class="divider"></div>
</body>
</html>

如何水平居中我的div，并在同一行上有其他文字？

3 个答案: