在 div 中居中多个 <p> 标签答案

【问题标题】：Centering multiple <p> tags within in a div在 div 中居中多个 <p> 标签
【发布时间】：2015-06-20 20:18:54
【问题描述】：

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

我尝试过<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;
}

【问题讨论】：

标签： html css tabs alignment

【解决方案1】：

要在 div 中水平居中 p，您可以将父 div 设为 text-align: center;，将内部 p 设为 display: inline-block;

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

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

【讨论】：