|
CSS - I Can Never Get Vertical Text Align Working!
I have a <p> tag with text inside of it with a height of 20px and width of 100px. Horizontal text alignment works fine within in, but I want the text to sit in the middle of the tag and I just can't do it. It defaults to sitting at the top. I try vertical-align: middle, but that doesn't work. None of the the vertical aligns do anything in fact
Similar TutorialsHi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. I need to centralized my text horizontally and vertically. For this purpose I have made the following css class. Code: .box
{
height:30px;
width:80px;
background-color:yellow;
display:block;
float:left;
text-align:center;
vertical-align:middle;
border:1px solid #000;
}
I have used this class in a span tag Code: <span class="box">This is a text</span> But my text is centered align horizontally but not vertically. What is the problem? How exactly can i vertically align text in css, i can't seem to find an easy way to do it, i basically want my text to be in the middle of a divs height, so much easier in tables heh. Tried padding but that then adds to the height, making it pointless for this use hi. i'm trying to have some text in a div, but also i want the text align to the bottom of the div. something like. but i don't know how... have a look at http://www.desorden.net/prueba.html any ideas? thanks in advance Never had a reason to use this property...not sure I'm understanding it correctly. My intent was to have the the nav links sit on the baseline of the 50px height container. Any help would be greatly appreciated. Thanks! .css #toplinks { float:left; width:580px; background-color:#fffff; height: 50px; text-align:right; vertical-align:bottom;} html <div id="toplinks"> Home | Preferences | Help | Site Map | Contact Us | Log Out</div> im sure this may be answered somewhere on this forum inside another post, but using search, i could not find anyone who had actually asked this specific question... i found a few posts back in 2002 that never got a responce... i'd hope we'd have an answer 3 years later... anyhow, my question is quite simple... i think.. i have a div that is 50px in height, and has some text inside it.. the text aligned center, and now i want it to vAlign center.. but the CSS doesnt seem to work... my problem is that the text in that field changes quite often, and having to constantly change margins in CSS would be a pain. anyhow, now for a snippit Code:
.advertboxtitle {
margin:10px 0px 0px 110px;
height:50px;
border:1px dashed #900;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#CCFFFF;
font-weight:bold;
text-align:center;
}
.advertboxtitlevalign {
vertical-align:middle;
}
Code: <div class="advertboxtitle"> <span class="advertboxtitlevalign">From X-Box to Xbox</span> </div> anyhow, reason why it is in a span is because i read that inline elements react to vertical-align:middle... but apparently not... anyhow, here is a link.. http://defunctgames.com/helpfix/middle.htm the text needs to be align verticaly in the dashed red box. thanks I have a td with a div inside it and I'm trying to vertically align the text in the div. The Div has a background image so the height of the div is important. For whatever reason vertical-align:middle just wont work. I've tried in both IE and FF and nothing I do seems to work. Here is my code Code: .globalNav, .globalNav td {
margin: 0px;
padding: 0px;
width: 100%;
height:28px;
border-bottom: 1px solid #94AEC1;
border-collapse: collapse;
}
.globalDiv{
color:#fff;
width:100%;
height:28px;
background:#94AEC1 url(../images/grad_bar.gif);
background-color:#94AEC1;
margin:0px;
padding: 0px 0px 0px 10px;
overflow:hidden;
}
.globalDiv a{
font-size:10pt;
color:#fff;
}
.globalDiv a:link,.globalDiv a:visited{
text-decoration:underline;
}
.globalDiv a:hover{
text-decoration:none;
}
Thanks I'm wondering how to "vertical-align: middle" the text in the anchor tags. I haven't got that part to work. Code:
a.aMenuLinks:link
{
color: #666666;
font-family: tahoma, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: bold;
text-decoration: none;
text-indent: 15px;
width: 100%;
height: 25px;
display: block;
}
Thanks... OK, I have <h1> and a class .footer_header_link. Both should center the text. But the class code isn't being centered. I thought this would be simple, but I must be overlooking something. Here's my css: Code: h1 {
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
text-align:center;
}
.footer_header_link{
text-align:center;
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
}
You can see a sample testhere. Scroll down the 3 column bullet point list. You will see the headers with an underline aren't centered. They have a class of "footer_header_link" Any ideas? thanks Sorry solved problem but can somebody post a definite solution to making a body { text-align:center } style work in both IE and firefox? I would like to delete this thread but I don't know how to, as another thread answered the question somewhat ambiguously. Thanks. When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!! a div works with this style, but a span does not. i want part to be left (defalut by the css file style applied), and then the inline span style to be to the right. not working: Code: echo "<a title='".$link['desc']."' href='".$linkurl."' class='cmenulink'>".$link['title']."</a>"; echo "<span style='text-align: right; padding: 1px;'>In: ".$link['in']." Out: ".$link['out']."</span><br />"; if you don't know php... Code: <a title='abc' href='abc.com' class='cmenulink'>ABC</a> <span style='text-align: right; padding: 1px;'>In: 999 Out: 999</span><br /> How can i make #mydiv DIV (the main layout div), be vertically aligned to middle? http://www.dinal.ru/new/max/index2.htm I've read a lot of docs about vertical alignment in internet, but I haven't found a good cross-browser solution, which doesnt't destroy my current layout. Thank you in advance Artashes Hi I want to know if it is possible to vertical align the text in these div tags and how it's done. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
#1 {width:15%}
#2 {width:20%}
#3 {width:25%}
#4 {width:20%}
#5 {width:20%}
#1,#2,#3,#4,#5 {
float:left;
overflow:hidden;
display:inline-block;
height:128px;
text-align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="1"><a href="#"><img name="" src="" width="100" height="125" alt="" /></a></div>
<div id="2"><a href="#">fffffffffffggfgf fg gd</a></div>
<div id="3"><a href="#"> dfg dfg dg d</a></div>
<div id="4"><a href="#"> dgd gd d</a></div>
<div id="5"><a href="#"> gdf gdg ddg</a></div>
</body>
</html>
Greets, dabomb_gent I'm trying to put a line of text on the bottom of a box. Code: <div style="width:500px;height:500px;background:black;vertical-align:bottom;"> This is a black box </div> <div style="width:500px;height:500px;background:black;vertical-align:baseline;"> This is a black box </div> What the above code displays: Code: ------------------------- | This is a black box | | | | | | | | | | | | | | | ------------------------- What I want it to display: Code: ------------------------- | | | | | | | | | | | | | | | This is a black box | ------------------------- Hello to all of you, I am doing my first steps in respect to CSS programming and wonder if I can get some hint here. I have created a table, with two different line colors, and a changing line background color with hover. Basically everything works as expected - just the vertical-align command does not respond at all. Am I doing something wrong? What could be the reason, and how can I continue investigating? I am using the CSS stylesheet, in connection with a Joomla 1.5 CMS. Please see the code below: Code: table.general {
text-align: left;
vertical-align: top;
width: 100%;
border-collapse: collapse;
}
table.general th {
text-align: center;
font-size: 15px;
color: white;
font-style:bold;
height: 30px;
background-color:#95B3D7;
border: 3px solid #FFFFFF;
}
table.general tr.row1 {
background-color: #f1f1f1;
}
table.general tr.row2 {
background-color: #e0e0e0;
}
table.general tr.row1:hover {
background-color: #CCCCCC;
}
table.general tr.row2:hover {
background-color: #CCCCCC;
}
table.general td {
border: 3px solid #FFFFFF;
padding: 4px;
}
The classes are being used in the following form: Code: <table style="width: 320px;" class="general"> <col span="4" width="80"></col> <tbody> <tr> <th>head A</th> <th>head B</th> <th>head C</th> <th>Alface</th> </tr> <tr class="row1"> <td>Topic A</td> <td>65</td> <td>215</td> <td>35</td> </tr> <tr class="row2"> <td>Topic B</td> <td>2</td> <td>2,3</td> <td>1,2</td> </tr> <tr class="row1"> <td>Topic C</td> <td>68</td> <td>55</td> <td>13</td> </tr> <tr class="row2"> <td>Topic D</td> <td>44</td> <td>50</td> <td>33</td> </tr> <tr class="row1"> <td>etc.</td> <td>494</td> <td>611</td> <td>238</td> </tr> </tbody> </table> Thank you in advance for your kindness! What I'm trying to do... I have some navigation links, a few pictures, and someone's name on the left hand side of the page. I want everything except for the name to be at the top.... the name is to be at the bottom. Is there a specific way to accomplish this? The content area will generally extend as high as 600 or so px, so would like the name to appear at the very bottom lined up with the content box. Thanks. Not sure exactly what code you need to see, but here's the left hand column: CSS: Code:
body {width:770px;
height:100%;
}
.nav_links {vertical-align:top; width:150px; }
.nav_links a{display:block; border-top:1px solid black; text-decoration:none;}
HTML: Code: <!-- Left Nav Menu --> <div class="nav_links"> Link 1 Link 2 Link 3 Link 4 Link 5 </div> <!-- End Left Nav Menu --> <!-- Misc. Pictures (Left Column)--> <div> <div style="float:right;"> <img src="images/left_pic_1.jpg" alt="Pic1" style="width:50px; margin-bottom:10px;" /><br /> <img src="images/left_pic_2.jpg" alt="Pic2" style="width:50px;" /> </div> </div> <div style="clear:both;"> <div style="float:right;"> <img src="images/left_pic_3.jpg" alt="Pic3" style=" width:50px; margin-bottom:10px;" /><br /> <img src="images/left_pic_4.jpg" alt="Pic4" style="width:50px;" /> </div> </div> <!-- End Misc. Pictures (Left Column) --> <!-- Name --> <div class="name" style="vertical-align:bottom;"> First M. Last </div> <!-- End Name --> Is not working for me, or I'm not using it right. Here is my problem: http://www.kingtoad.net/development/kingtoad.net/ I want the "navigation" to align to the top even with the "content". I can't seem to get it up there though. Any suggestions would be nice. for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code, #outer{ position: relative; float: left; width: 900px; height: 200px; } #outer .inner{ position: relative; float: left; width: 500px; height: 200px; vertical-align: bottom; } however the content of the inner div is starting at its default location which is top left of the inner div instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases. please advice. thanks. |
|||||||