Question

我想从此http://i.imgur.com/XesXy.png更改为此http://prntscr.com/o9hfh 如何在两侧添加额外的间隙并将文本更多地挤压在一起？基本上我想在不使用text-align：center的情况下使文本居中，因为我喜欢text-align：left更好，但是如果我离开的话，文本将不再在中心。

HTML

<body> <!-- start of the body-->
            <ul class="sidemenu">
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">FAQ</a></li>
                <li><a href="">How To Order</a></li>
                <li><a href="">Term And Agreement</a></li>
                <li><a href="">Shipping Information</a></li>
            </ul>
            <div id="about-us">

            <p><h2>About Us</h2>Lorem ipsum .<br />

Morbi in libero quis quam consequat malesuada..</p>
            </div>

            </body>

css：

#about-us {
margin: 10px auto;
background-color:#FFF;
height:800px;
width:710px;
left:125px;
position: relative;
padding:0em 0em;

}

#about-us p {
text-align:left;
padding-top: 20px;

}

body {
position:relative;
}

.sidemenu{
position:absolute;
background-color: #fff;
width:240px;
height:780px;
margin-top: 10px;
list-style:none;
text-align:left;
padding-top: 20px;


}

.sidemenu li a{
color:#222222;
padding: 0em 1em;
line-height: 2em;

}

Answer 1

也许试试padding

 #about-us p {
   padding: 0 2% (or px, ems if you prefer);
 }

或者，您可以以相同的方式使用margin。

Answer 2

使用左右填充。

类似的东西：

#about-us p {
padding: 20px 20px 0  20px;
}

Answer 3

只需在#about_us框中添加填充，同时相应地切割其宽度和高度：

#about_us {
           padding:20px 40px;
          }

并配置p标签的行高：

#about_us p {
       line-height:40px;
      }

Answer 4

您可以在段落上使用填充以增加两侧的间距：

#about-us p {
    padding: 0 40px;
}

请注意，这是shorthand：

#about-us p {
    padding-left: 40px;
    padding-right: 40px;
}

Answer 5

使用

将文本压缩在一起

line-height:15px

并简单地使用边距或填充来安排

Answer 6

请勿将h2标签（或任何标头标签）放在p标签内。

在div＃about-us

上打一些填充

如何用css在文本的每一侧添加相等的间隙？

6 个答案: