i cant get text into the middle of a .css button.
vertical-align:sub; works, as does vertical-align:super;
but vertical-align:top, middle, and bottom, dont work.
can anybody tell me how to fix it?It would help if we could see some coding so we dont have to guess blind. Without seeing anything I will ask you if you are using a proper doctype? have you tried validating your html and css? using a proper doctype and validating your files can help remove the errors from occuring. Show us your code though and we can help you more
using html 4 transitional doctype. html valid. css checked.
relevant css is:
#b4Button a
{
color: #ffeecc;
text-align: center;
font-family: Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
line-height: 100%;
vertical-align: middle;
text-decoration: none;
border: 4px outset #ffeecc;
background-color: #550000;
display: block;
height: 100px;
width: 100px;
padding: 0px 0px;
margin: 0px;
}
#b4Button a:hover
{
background-color:#ffeecc;
color:#550000;
padding:4px;
border:0px;
}
relevant html is:
<div id="b4Button">
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">button text here</a></div>
</div>verticle align messes up for some reasonTry line-height: 100px;
That will work just fine if you have buttons containing only one line of text.first thing, lets clean the code up. This will help shorten the amount of code used which means less needs to be loaded. Then we'll see what we can do about your problem
The code you provided would be better done like:
#b4Button a
{
display: block;
height: 100px;
width: 100px;
margin: 0;
padding: 0;
border: 4px outset #fec;
background: #500;
font: bold 12pt/100% Helvetica, sans-serif;
color: #fec;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
#b4Button a:hover
{
background:#fec;
color:#500;
padding:4px;
border:0;
}
<div id="b4Button">
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">button text here</a></div>
</div>
Your Problem:
i have had this problem before and as incawarrior said, its bugged. One thing you can try is adding a padding of half the height to do that. This isnt perfect, but it is a possible fix. sry
Questions:
- what is the imbedded div there for? doesnt look like it is doing anything.
Other comments:
- no unit has to be used w/ a value of 0 because 0 of any unit is the same
- best not to use pt for font size, em is best to use as it allows the user to change font size if he cant read it
- more about the font attribute (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand">http://www.w3.org/TR/CSS21/fonts.html#font-shorthand</a><!-- m -->)
opinion:
- I prefer to use HTML 4.01 strict (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">) because it ensures that my coding is more clean cut and it cuts out some areas for error at timesthanks very much for your help. the code looks much better.
i thought of using padding in my sleep last night so i'll give that a try.
the div is there to position the button. the buttons stack vertically on their own but to get them to line up horizontally i thought of putting each one in its own div, but its just occurred to me that using top:100px left:200px in the css might be a better way. would that work?Originally posted by rapid
thanks very much for your help. the code looks much better.
good deal
i thought of using padding in my sleep last night so i'll give that a try.
always good to think of possible fixes on your own, reassures you that you are actually learning some stuff. good feeling
the div is there to position the button. the buttons stack vertically on their own but to get them to line up horizontally i thought of putting each one in its own div, but its just occurred to me that using top:100px left:200px in the css might be a better way. would that work?
The reason that they stack vertically is because you defined #b4Button a as having a display of block. Their default is inline which is what you need. (if you need more of an explanation of block vs inline let me know) If you remove that code all together then they will horizontally aline (if you remove the <div> as well because that is also a block element)
And im not quite sure what you would be trying to accomplish with the top: left:
That help?
vertical-align:sub; works, as does vertical-align:super;
but vertical-align:top, middle, and bottom, dont work.
can anybody tell me how to fix it?It would help if we could see some coding so we dont have to guess blind. Without seeing anything I will ask you if you are using a proper doctype? have you tried validating your html and css? using a proper doctype and validating your files can help remove the errors from occuring. Show us your code though and we can help you more
using html 4 transitional doctype. html valid. css checked.relevant css is:
#b4Button a
{
color: #ffeecc;
text-align: center;
font-family: Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
line-height: 100%;
vertical-align: middle;
text-decoration: none;
border: 4px outset #ffeecc;
background-color: #550000;
display: block;
height: 100px;
width: 100px;
padding: 0px 0px;
margin: 0px;
}
#b4Button a:hover
{
background-color:#ffeecc;
color:#550000;
padding:4px;
border:0px;
}
relevant html is:
<div id="b4Button">
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">button text here</a></div>
</div>verticle align messes up for some reasonTry line-height: 100px;
That will work just fine if you have buttons containing only one line of text.first thing, lets clean the code up. This will help shorten the amount of code used which means less needs to be loaded. Then we'll see what we can do about your problem
The code you provided would be better done like:
#b4Button a
{
display: block;
height: 100px;
width: 100px;
margin: 0;
padding: 0;
border: 4px outset #fec;
background: #500;
font: bold 12pt/100% Helvetica, sans-serif;
color: #fec;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
#b4Button a:hover
{
background:#fec;
color:#500;
padding:4px;
border:0;
}
<div id="b4Button">
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm">button text here</a></div>
</div>
Your Problem:
i have had this problem before and as incawarrior said, its bugged. One thing you can try is adding a padding of half the height to do that. This isnt perfect, but it is a possible fix. sry
Questions:
- what is the imbedded div there for? doesnt look like it is doing anything.
Other comments:
- no unit has to be used w/ a value of 0 because 0 of any unit is the same
- best not to use pt for font size, em is best to use as it allows the user to change font size if he cant read it
- more about the font attribute (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand">http://www.w3.org/TR/CSS21/fonts.html#font-shorthand</a><!-- m -->)
opinion:
- I prefer to use HTML 4.01 strict (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">) because it ensures that my coding is more clean cut and it cuts out some areas for error at timesthanks very much for your help. the code looks much better.
i thought of using padding in my sleep last night so i'll give that a try.
the div is there to position the button. the buttons stack vertically on their own but to get them to line up horizontally i thought of putting each one in its own div, but its just occurred to me that using top:100px left:200px in the css might be a better way. would that work?Originally posted by rapid
thanks very much for your help. the code looks much better.
good deal
i thought of using padding in my sleep last night so i'll give that a try.
always good to think of possible fixes on your own, reassures you that you are actually learning some stuff. good feeling
the div is there to position the button. the buttons stack vertically on their own but to get them to line up horizontally i thought of putting each one in its own div, but its just occurred to me that using top:100px left:200px in the css might be a better way. would that work?
The reason that they stack vertically is because you defined #b4Button a as having a display of block. Their default is inline which is what you need. (if you need more of an explanation of block vs inline let me know
) If you remove that code all together then they will horizontally aline (if you remove the <div> as well because that is also a block element)And im not quite sure what you would be trying to accomplish with the top: left:
That help?