Question

我有几个不同的部分，我试图将一组标签集中在一起。我试图将一组标签放入无序列表中，而另一组标签我已尝试使用<p>内的多个<div>标签，但似乎没有任何效果。我知道其他人已经遇到了这个问题，但是我还没有找到它，所以如果这是一个重复的问题我会道歉。

我已尝试<position: absolute>，<display: inline>和其他人。我似乎无法得到它。提前谢谢！

此外，他们现在不应该使用标签，因为我现在不想担心jQuery，只是看起来像他们！

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/default.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <title>STARSHIP CHRONICLES</title>
</head>

<body>
    <div id="container">
        <div id="header">
            <h1>STARSHIP CHRONICLES</h1>
            <p id="topmenu">SEARCH - FAQ - FEEDBACK - ABOUT</p>
        </div>
        <div id="ships">
            <!--ships go here-->
        </div>
        <!--This section is the area for the tabs that attach to the boxinfo-->
        <div id="tabs">
            <ul id="tabs">
                <li id="tabs">OVERVIEW</li> <!--link to div id="geninfo"-->
                <li id="tabs">STATS</li> <!--link to div id="statsinfo"-->
                <li id="tabs">IMAGES</li> <!--link to div id="imagesinfo"-->
                <li id="tabs">CONTEXT</li> <!--link to div id="contextinfo"-->
            </ul>
        </div>
            <!--need to figure out how to place different information in same box when click on separate tabs-->
            <div id="geninfo">
                <table>
                    <tr>
                        <td><p class="info">SHIP NAME:</td>
                        <td><span class="text">Recursant-Class Star Destroyer</span> </p></td>
                    </tr>
                    <tr>
                        <td><p class="info">ALLIANCE:</td>
                        <td><span class="text"> Commerce Guild</span> </p></td>
                    </tr>
                    <tr>
                        <td><p class="info">ORIGIN:</td>
                        <td><span class="text"> Star Wars</span> </p></td>
                    </tr>
                    <tr>
                        <td><p class="info">SIZE:</td>
                        <td><span class="text"> 1,187 meters </spam></p></td>
                    </tr>
                </table>
            </div>

        <div id="bottommenu">
            <!--This is the scale-->
            <p id="length">0m-479m</p><p id="length">480m-1299m</p><p id="length">1300m-1999m</p><p id="length">2000m-4999m</p><p id="length">5000m+</p>
        </div>
    </div>
</body>

</html>

CSS

body {
background: url(../images/spacebg.jpg) no-repeat fixed ;
}
#container {
width: 100%;
height: 100%;
}

#header {
width: 50%;
height: 100px;
border: solid 1px #0071BC;
background-color: transparent;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#info {
margin-left: auto;
margin-right: auto;
position: relative;

}
#geninfo {
margin-top: 100px;
width: 35%;
height: 200px;
background-color: #000000;
border: solid 1px #0071BC;
margin-left: auto;
margin-right: auto;
padding: 5px;
}

/*tab shape*/
#tabs {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
width: 100px;
text-decoration: none;
}
#tabs ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#tabs li {
margin: 0 0.5em 0 0;
}


h1 {
color: white;
font-family: OratorSlant;
font-size: 50px;
margin-left: auto;
margin-right: auto;
}

#topmenu {
color: #ffffff;
font-family: DinBlack;
font-size: 15px;
}

table {
padding: 0px;
margin: 0px;
line-height: 1px;

}


/*h2*/
.info {
color: #0071BC;
font-size: 25px;
font-family: Captain;
}

/*infotext*/
.text {
color: #0071Bc;
font-size: 18px;
font-family: DinReg;
}

#bottommenu {
position: absolute;
bottom: 5px;
display: inline-block;
}

#length {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
display: inline-block;
margin: 5px;
width: 200px;
height: 20px;
}

Answer 1

要在div中水平居中p，您可以制作父div text-align: center;和内p display: inline-block;

在#bottommenu内部，删除绝对定位（有更好的方法来放置页脚），并添加text-align：center

许多可能的重复项，例如this one

在div中居中多个<p>标签</p>

1 个答案: