|
CSS - Vertical Text Alignment.
I have what I think is an easy question for you guys. I have an absolute positioned element and I gave it a height of 100px. I want to know how to make it so that any text that I enter goes to the bottom of this element. By default, the text appears at the top left. I tried vertical-align with all of its values, but none of them worked. The only way I could get it to appear the way I wanted was to use line-height. Using line-height I am able to get the text where I want it, but it doesn't seem like this is the way it should be done. Is there a way in which you don't have to specify a specific line-height value to get the where you want and it make it so all text appears at the bottom instead of the top? Here is what it looks like, and the CSS is below. Thanks.
Code:
<html><head><title>test</title>
<style type="text/css">
body {
background-color: white;
}
#top {
position: absolute;
left: 20%;
right: 20%;
top: 2.5%;
height: 100px;
color: white;
background-color: rgb(20%,20%,20%);
border: 2px solid red;
line-height: 180px;
}
</style>
<body>
<div id="top">
this is a test
</div>
</body>
</html>
Similar TutorialsHi guys, I'm still a beginner at CSS and I have run into a problem... In my footer, I want all the text to be aligned vertically and horizontally in the middle. eg. ------------------div-------------------- ............. text text text text text ------------------div-------------------- Can you please show me what text I would need to put in the #footer? My footer is 900px wide and 120px high. I am adding more than one line of text. If there's any more info u need from me to solve this problem then please ask. Any help will be great. Thank you very much I'm creating a tabbed menu system to navigate my site, which is in a three column layout wrapped in the centre fluid wrapper. Due to the way I'm doing the menu I need to vertically align the menu to the bottom of the DIV it is in. The menu is an unordered list with the styling stripped out and replaced so that the items are arranged horizontally. Yet no matter what I do they either align to the top or the centre, worse while searching for an answer I only seem to be able to find people who want centring. Code wise: html4strict Code: Original - html4strict Code <body> <div id="wrapper"> <div id="left"></div> <div id="centre" class="index"></div> <div id="nav"> <ul id="tabnav"> <li><a href="index.php" class="index">Contents</a></li> <li><a href="wip.php" class="wip">In Progress</a></li> <li><a href="c-shorts.php" class="shorts">Short Stories</a></li> <li><a href="fan-fics.php" class="fanfics">Fan Fics</a></li> <li><a href="contact.php" class="contact">Contact</a></li> <li><a href="info.php" class="info">Information</a></li> </ul> </div> </div> </body>
CSS: css Code: Original - css Code #wrapper { background-color:transparent; position:absolute; left:4em; top:1em; bottom:4em; right:4em; min-height:50em; z-index:1; } #left { background-image:url(/fiction/images/left-spiral.png); background-repeat:repeat-y; background-position:right 4px; background-color:transparent; position:absolute; left:0em; top:0em; width:2em; height:100%; z-index:2; } #centre { background-image:url(/fiction/images/right-spiral.png); background-position:0px 4px; background-repeat:repeat-y; background-color:#FCFFC4; position:absolute; left:2em; right:3em; top:0px; height:100%; z-index:4; } /* --- Navigation Elements --- */ #nav { background-color:#FCFFC4; -moz-transform: rotate(90deg); -moz-transform-origin: top left; position:absolute; right:-50em; top:0em; height:3em; min-width:50em; z-index:3; } #nav ul#tabnav { list-style-type:none; margin:0; padding-left:40px; height:2em; } #nav ul#tabnav li { font-variant:small-caps; float:left; /* height:21px; */ background-color:transparent; } #nav ul#tabnav a:link, #nav ul#tabnav a:visited { display:block; color:#000; background-color:#FCFFC4; text-decoration:none; margin-right:12px; padding:3px 6px 2px 6px; /* T R B L */ -moz-border-radius:10px 10px 0 0; /* TL TR BR BL */ } #nav ul#tabnav a:hover { /* background-color:#900; */ color:#666; }
(Not sure how much of that is needed to answer the question.) (Oh and many of the design elements colors etc are still in that due to testing stuff not because I actually need them.) Which is how do I get that dang thing aligned to the bottom/side of that box? Hi, I have navigation links at the top of a blog in a header file, and cannot get them to align vertically for both firefox and IE. I've tried everything I can think of (using extra <br>, <p>, vertical-align: middle, changing margins, changing padding, etc) but cannot find a solution that aligns them vertically in both browsers. Any help is appreciated. Here is the code, which works in firefox: Code: <body> <!-- page header --> <div id="header" "border: 0px solid; margin:0 auto; "> <a href="http://www.website.com/blog/"><IMG SRC="http://www.website.com/images/logo.png" BORDER=0 width="435" height="92" ALT="logo" align="left"></a> </div> <div style="clear: both; margin:0 auto; "></div> <div style="background-image: url(http://www.website.com/images/sidebar_center2.jpg); border: #333333 2px solid; width: 900px; height: 60px; padding: 6px; margin: 0px auto; font-size: 17px; text-align: center; "> <p><font face="calibri,verdana" color="#ffffff"> <a href="http://www.website.com/"><font color="#ffffff">Home</font></a> | <a href="http://www.website.com/tips-1.html"><font color="#ffffff">ilnk 1</font></a> | <a href="http://www.website.com/tips-2.html"><font color="#ffffff">link 2</font></a> | <a href="http://www.website.com/tips-3.html"><font color="#ffffff">link 3</font></a> | <a href="http://www.website.com/tips-4.html"><font color="#ffffff">link 4</font></a> | </font></p> </div> <!-- begin wrapper divs --> <div id="content"> Hi-- I'm developing a 3-column site for a customer and was asked to make the first two columns align vertically to 385px. So the bottoms of all the text will be at 385px. The text is dynamic, so I have no way of knowing how tall the blocks will be. The first column will be one or more paragraphs of text and the second will be a bulleted list. Any help is greatly appreciated! :grimey Hi, 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. Hi, there. Having looked around the forum for a CSS method of vertically centering an IMG within a DIV, I found the following code which works perfectly in IE but not FF : #full-image { float: right; width: 380px; height: 380px; text-align: center; line-height: 0px; background-color: #F0F5F7; margin-top: 5px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; } #full-image img { margin-top: expression(( 380 - this.height ) / 2); } That's right - works in IE but not FF, which is most unusual! Any ideas how to make this work cross-browser? Thanks in advance for any assistance. Hello all. Suppose I have the following: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* footer styles */
#footer { clear: both; }
#footer ul {
width: 544px;
list-style-type: none;
display: block;
} /* end #footer ul */
#footer ul li {
float: left;
background-color: #003366;
} /* end #footer ul li */
</style>
</head>
<body>
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><img src="images/foot_nav2.gif" alt="" id="footer_image" /></li>
</ul>
</div>
</body>
</html>
Now suppose that the image is 50px high. What I would like is to get the links to align at the bottom of the instead instead of at the top. I tried a vertical-align: bottom but that didn't seem to help the situation any. Hi, I am having trouble with divs inside tables cells. I have td's in a row, and I want all the objects within these cells to be aligned at the top of the cells. However, the objects within the cells with lesser content are vertically aligning to the central level of the cell with the most content. Please check: www dot incorrectlyprogrammed dot org/CRC/ to see what I mean. This is driving me mad. Any help appreciated!! So I have a calendar that I created in PHP and I'm displaying it in a table and I'm having trouble aligning the title and the two image arrows that go on either side of it. I'm trying to align everything vertically in the middle of the row and it seems that in Firefox, the Title is lower than the two arrows, but in Chrome and IE it seems to be right in the middle where it should. How do I solve this? Code: <table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cal_left_arrow">
<img src="/images/left_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $prevYear; ?>, <?php echo $prevMonth; ?>);" />
</td>
<td class="cal_title" colspan="5" valign="middle">
<?php echo date('F', mktime(0,0,0,$month,1,$year)).' '.$year; ?>
</td>
<td class="cal_right_arrow">
<img src="/images/right_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $nextYear; ?>, <?php echo $nextMonth; ?>);" />
</td>
</tr>
Code:
#event_calendar {
margin-top:50px;
margin-bottom:20px;
float:left;
height:auto;
width:245px;
}
.calHeaderDays {
font: bold 10px Arial, Helvetica, sans-serif;
background-color: #3F4C6B;
text-align:center;
height: 20px;
width:245px;
color: white;
overflow:visible;
/*border: 1px solid #3F4C6B;*/
}
.cal_title {
text-align: center;
font: bold 16px Arial, Helvetica, sans-serif;
color: #C79810;
height:40px;
vertical-align:middle;
}
.cal_left_arrow {
text-align:right;
height:40px;
vertical-align:middle;
}
.cal_right_arrow {
text-align:left;
height:40px;
vertical-align:middle;
}
table {
width: 245px;
font-family: Arial, Helvetica, sans-serif;
background-color: white;
border-collapse: collapse;
}
table img {
cursor: pointer;
cursor: hand;
}
.calToday {
height: 28px;
vertical-align: middle;
background-color: #3F4C6B;
color: #fff;
font-weight:bold;
text-align:center;
font-size: 10px;
}
.slDay {
height: 28px;
font-size: 10px;
width: 14%;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
text-align:center;
}
ok the page is http://v2.seductionslingerie.biz/ and the top buttons (home, etc...) will not change their bg color on hover and the text inside the div will not valign to the bottom. please help! here is the html/css code below CSS: Code: div.top_buttons {
background-image:url(../images/top_button_bg.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-color:#660000;
border:1px #660000 solid;
height:50px;
vertical-align:bottom;
padding:2px;
color:#FF99FF;
font-family:"BankGothic Lt BT", Verdana, Arial;
font-family:14px;
font-weight:bold;
cursor:hand;
cursor:pointer;
}
div.top_buttons:hover {
background-color:#950000;
color:#F5F1F2;
}
HTML: Code: <div class="top_buttons">HOME</div> Any and all help is much appreviated! I am already used to tableless design but I have not yet solved the way to vertically center texts the way a cell of a table does by default. How do you solve this problem?. Obviously I look for a simple CSS style to manage this need. Thanks! Ok...I am dabbling with CSS and I was wondering if there was anyway to specify your text to run bottom to top instead of left to right in a table cell. Anyone know if it can be done? I'm trying to get vertical text in a menu ie h o m e - l i n k - And so on how can this be done thanks Hi, I've seen a number of posts and web pages about this but so far have NOT found a method that conforms to the w3.orgs css standard. There seems to be a lot of interest in this and l wondered whether anyone has found a work around that is compatible on more browsers than I.E? what is the tag for writing vertical in CSS? 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 How do you go about vertically aligning text in a <div> tag that is 200px in height? 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 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 i was looking for way how to display vertical text with css and found a solution: #vertical { writing-mode: tb-rl; filter: flipH flipV; } <div id="vertical">display vertical text</div> however, this works fine with IE 6.0, but is comletely ignored with Mozilla 1.4! is it that Mozilla just doesn't support this or is there a way how to work it around(write it in a way both IE and Mozilla could understand it)? i'll aprecciate your help very much.. |
|||||||