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

我正在尝试创建一个具有左对齐和右对齐文本的

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;
}

left
右侧
#横幅{
位置：固定；
顶部：0px；
高度：50px；
宽度：100%；
背景色：#702f7b；
明确：两者皆有；
}
.横幅文本大{
颜色：#ffffff；
字体系列：“arial”；
字号：18px；
垂直对齐：中间对齐；
}
.条幅文本小{
颜色：#ffffff；
字体系列：“arial”；
字体大小：14px；
垂直对齐：中间对齐；
}
.左对齐{
浮动：左；
}
.右对齐{
浮动：对；
}

---

我做错了什么？

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

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

这里有一个JSFIDLE可以帮助您：

---

编辑：如上面的一条注释所述，您缺少了“。

要使

p

元素在其父元素内垂直居中，只需将

行高度设置为父元素的高度即可。要使它们也远离左侧和右侧
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 */
}

.
给你：

<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;
}


left
右侧
身体{
保证金：0；
填充：0
}
#横幅{
位置：固定；
顶部：0px；
高度：50px；
宽度：100%；
背景色：#702f7b；
明确：两者皆有；
}
.横幅文本大{
颜色：#ffffff；
字体系列：“arial”；
字号：18px；
垂直对齐：中间对齐；
左边距：10px；
}
.条幅文本小{
颜色：#ffffff；
字体系列：“arial”；
字体大小：14px；
垂直对齐：中间对齐；
右边距：10px；
}
.左对齐{
浮动：左；
}
.右对齐{
浮动：对；
}
的页边空白来自broswer的样式表

覆盖
p
的边距，并将两者的
行高设置为相同的值



左
右
.横幅文本{
利润率：15px0；
线高：20px；
颜色：#ffffff；
字体系列：“arial”；
}
.横幅文本大{
字号：18px；
}
.条幅文本小{
字体大小：14px；
}
您应该在banner div中使用而不是？是使文本出现在不同行上的原因。
p
元素是否意味着位于同一水平行上？
p
元素应该位于同一行上。我是从另一个网站（不知道在哪里）得到的。@DOK：当我把它改成
span
时，文本移到了横幅
div
的顶部。这部分解决了我的问题：文本有左右边距。文本仍然没有垂直对齐。据我所知，
垂直对齐：中间应将文本的垂直中心放置在其父容器的中心。它仅对齐指定元素内的文本。应将其设置为要对齐的两个元素的容器。但是还要注意：它对float元素不起作用。垂直对齐不起作用的原因是它只适用于表元素，您可能需要通读这个问题的答案：它也适用于。
<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;
}

<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;  
}