Question

我正在尝试使用左右对齐的文字创建div。左侧文本是右侧较大的字体。我想在左侧文本的左侧和右侧文本的右侧有一个边距（10px）。我得到的是：

+------------------------------+
|                         Right|
|Left                          |
+------------------------------+

这是我的HTML和CSS：

<div id='banner'>
  <p class='align-left banner-text-large'>Left</p>
  <p class='align-right banner-text-small'>Right</p>
</div>

#banner {
  position: fixed;
  top: 0px;
  height: 50px;
  width: 100%;
  background-color: #702f7b;
  clear: both;
}

.banner-text-large {
  color: #ffffff;
  font-family: 'arial';
  font-size: 18px;
  vertical-align: middle;
}

.banner-text-small {
  color: #ffffff;
  font-family: 'arial';
  font-size: 14px;
  vertical-align: middle;
}

.align-left {
  float: left;
}

.align-right {
  float: right;
}

我做错了什么？

Answer 1

要让p元素在其父元素中垂直居中，只需将line-height设置为等于父元素的高度即可。要让他们也 10px远离左侧和右侧，他们的父母双方在该父元素上设置padding-left和padding-right。

那就是说，我建议采用以下方法：

#banner {
    /* above CSS unchanged */
    box-sizing: border-box; /* forces the width of the element
                               to include the padding and border widths */
    padding: 0 10px; /* sets the padding-top and padding-bottom to 0,
                        padding-left and padding-right to 10px */
}

#banner p {
    margin: 0; /* overrides the browser default-margin */
    padding: 0; /* overrides the browser default-padding */
    line-height: 50px; /* forces the text to be vertically centred */
}

JS Fiddle demo

Answer 2

您似乎没有重置段落元素的默认边距

只需将此添加到您的CSS中（并在左右对齐的文本中添加额外的边距）：

p { margin: 0; }

这是一个帮助的小伙伴：

http://jsfiddle.net/benbroadley88/5C4Eb/

编辑：你错过了上面其中一条评论中提到的'。

Answer 3

你走了：

<div id='banner'>
  <p class='align-left banner-text-large'>Left</p>
  <p class='align-right banner-text-small'>RIGHT</p>
</div>

body {
    margin: 0;
    padding: 0
    }

 #banner {
  position: fixed;
  top: 0px;
  height: 50px;
  width: 100%;
  background-color: #702f7b;
  clear: both;
}

.banner-text-large {
  color: #ffffff;
  font-family: 'arial';
  font-size: 18px;
  vertical-align: middle;
  margin-left: 10px;
}

.banner-text-small {
  color: #ffffff;
  font-family: 'arial';
  font-size: 14px;
  vertical-align: middle;
  margin-right: 10px;
}

.align-left {
  float: left;
}

.align-right {
  float: right;
}

Answer 4

<p>的余量来自broswer的样式表。
覆盖p的边距，并将line-height设置为两者的相同值。

http://jsfiddle.net/wJyv2/1/

<div id='banner'>
  <p class='align-left banner-text banner-text-large'>Left</p>
  <p class='align-right banner-text banner-text-small'>RIGHT</p>
</div>

.banner-text {
  margin: 15px 0;
  line-height: 20px;
  color: #ffffff;
  font-family: 'arial';
}

.banner-text-large {
  font-size: 18px;
}

.banner-text-small {
  font-size: 14px;  
}

带有左边和右边文本的CSS Div，边距和垂直对齐

4 个答案: