I don't see what would control text to be offset on different computers, as seen below. One is centered within the blue area correctly, the other seems offset somehow. It's happening in a text field and a button. Live site: http://www.muuzik.me:8000
The key is in adjusting the padding around that element. Currently there is 18px of padding on the top and 4px of padding on the bottom. That's not balanced, so the text won't be centered vertically. To get it centered horizontally, make sure that the left and right padding are the same; to get it centered vertically, make sure that the top and bottom padding are the same.
It probably helps things that you can use a shorthand declaration to create this effect:
padding: 10px 20px; will set the top & bottom to 10px and the left & right to 20px.
I think that is the padding settings. See the green areas? Those are the paddings. Your curren t padding is
padding-top:14px;
padding-right:18px
padding-bottoem:4px;
padding-left:18px;
That is why the text is not presented in center;
You can try to set the padding to
padding: 12px;
I tried this, it works for me on Chrome and Firefox
You should show the whole CSS, but did you try to set text-align: center; and line-height: 46pxto the button?
Related
I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button:
.btn-order {
width: 220px;
height: 58px;
font-size: 24px;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: 58px;
border: 1px solid black;
}
<div class="btn-order">Complete Order</div>
The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.
Here is a good slide show to help you understand this concept more... line-height
And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/
By setting the line-height to 58px you are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.
SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.
it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.
Note there is a default value of line-height property.
line-height defines the height of text which make the paragraph looks neat so vertical-align works with respect to line-height when you increase the line height it increases the height and the you can more clearly see the effects of vertical-alignment of text
think this as a notebook which we children use to learn English -writing in nursery class
The text you generate is inside its own line box and vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.
Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.
If you have a division with height:58px the distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.
Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.
I have a button on my wordpress site titled 'try apptive free' in my header with a 2px border around it. The border already inherits a 10px padding. I want to bring the padding down to 5px to shrink the border distance however, changing the padding movies the 'try apptive free' out of line with the logo on the left side of the header titled 'Apptive'.
Is there an easy way to change the padding to 5px without moving the button out of line with the logo?
www.allaboutcats.wordpress.com
You could always add some margin to it, to compensate for the removed padding. Or you could place both elements in one container and give them vertical-align: middle.
Give it a margin-top: 5px; It should work.
I actually wrote here a whole page of text, but it was impossible to understand and putting a jsfiddle is just easier for you guys.
here it is: http://jsfiddle.net/pMdZK/
the problem is links dont work, if they do hovers doesnt work and I have tried solutions like clearfix.
Both "container" and "default" divs are essential to me and they are actually 2 images that meant to overlap each other(one is half-transparent, gif image with some parts missing. that is to change that image later for other stuff, while user is in page.)
also changing
position:absolute
doesnt seem to do much either.
Changing the padding-top of all items into margin solves your problem. The reason is that padding extends the entire entity while margin pushes the other entity's away.
http://jsfiddle.net/pMdZK/1/
You had:
#containerx #pl6
{
padding: 521px 0 0 120px;
position: absolute;
font-size: 22px;
}
You need:
#containerx #pl6
{
margin: 521px 0 0 120px;
position: absolute;
font-size: 22px;
}
change this for every item ofc.
The difference between margin and padding:
Margins and padding can be confusing to the novice Web designer. After all, in some ways, they seem like the same thing: white space around an image or object.
Padding is the space inside the border between the border and the actual image or cell contents. In the image, the padding is the yellow area around the contents. Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.
Margins are the spaces outside the border, between the border and the other elements next to this object. In the image, the margin is the red area outside the entire object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.
To further explain the difference i made a quick jsfiddle.
http://jsfiddle.net/GRLkt/
The padding box expands the entire div. (as you can see by the background image).
The margin box pushes the other content away.
The web site is here.
See that blue bar behind the menu items? It's 40 pixels high and one pixel wide, and used as a repeating background - so, why does it look strange after the right-most menu item?
The image is here, if anyone needs it.
The image is used thusly:
.menu_bar
{
background-image: url("http://leonixsolutions.com/images/menu_background.jpg");
background-repeat: repeat-x;
font-size: large;
padding-left: 160px;
padding-top: 5px;
text-align: center;
}
Nothing is wrong with it,
Your menu container div.pd_menu_01 has a background color #ffffff remove it and you'll be fine...
The real problem here is that .pd_menu_01 extends too far to the right (and with its white background, covers the gradient). Try making it inline-block with an auto width, or something similar, so that it doesn't extend further to the right than it has to. You could also set its background color to transparent (but in my browser, .pd_menu_01 makes the page too wide and thus introduces unnecessary and ugly horizontal scrollbars, so the width solution is still relevant).
.pd_menu_01 has a background color of white declared, and is a div. Since divs are block level elements, they have a default width of 100%.
Either declare the div to be display:inline, wrap the menu in a span instead of a div, or make the background color transparent instead of white.
I'm stumped on a css problem. I've put up a test page here: http://georgecrawford.com/test/ for you to check.
I have a left-floated sidebar div, and a main content div which follows it (and which should wrap around it). If the content is just paragraphs, there's no problem, as the text wraps nicely around the float. However, I have some blockquotes in the content, and I'd like these to have a background-color and/or a border. The text in these is no problem, it wraps nicely around the sidebar of course. However, the blockquote itself spans the entire width of the content div, which means a border around it would run over the top of the sidebar.
How can I ensure that blockquotes in the content div are shortened horizontally to be the same width as the text lines (the 'line boxes') within them? Paragraphs have the same behaviour, but I don't need a border around my paragraphs!
Thanks for any help!
I've stumbled upon a potential fix for this problem.
If I set all blockquotes with the CSS property overflow: auto, it makes them reduce to the desired width when they'd otherwise overlap the floated sidebar. I've updated the demo at http://georgecrawford.com/test/ so you can see the difference. It's perfect in Safari/OS X, but I haven't yet tested in other browsers.
Any comments? Does this solution have any drawbacks? Many thanks again for your help.
In IE 9 the "overflow: auto" corrects blockquote underlay or overlay of a div floating to one side, however the overflow correction does not allow standard blockquote indentations on both blockquote borders.
background-color: #ccdfff;
border: 5px #dfefff solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #003366;
line-height: 2em;
letter-spacing: 0.2em;
overflow: auto;
padding: 20px;
This leaves blockquote pushed right to the left edge of a "float: right" div. Blockquote border-right margins are ignored by IE9. Chrome has no problem displaying correct blockquote indentations.
I have tested parent-child adjustments, also display, float, and position selectors but these are not helpful. Anyone know how to correct IE blockquote margin collapse when blockquote is positioned beside a floating div?
The problem is not the blockquote - that just does what it's told, it stretches to 100% of it's parent's width. It's the parent div with the id content that does not have a float property, and thus spans across the floated div.
Can you try putting the sidebar as a child into content, and not as a sibling next to it? I think the blockquote should then adhere to the width rules.
Alternatively, you can always set the blockquote to display: inline, but that may not be what you want, as it then won't stretch to the full width anymore.