To have the p
elements vertically-centered within their parent, simply set line-height
equal to the height of the parent element. To have them also 10px
away from the left, and right, sides of their parent set the padding-left
and padding-right
on that parent element.
That said, I'd suggest the following approach:
#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 */
}