|
CSS - Vertically Aligned Text Inside A Div
Is there any way to make some text vertically aligned inside a DIV? Just like you would do inside a cell?
Code: <table><td valign="middle" height="100">This text is vertically aligned</td></table> Apparently, the vertically-align CSS property only works if it is relative to other DIVs. What I want is some vertically aligned text inside a DIV. Thanks for the help. Similar TutorialsHow to get a text aligned vertically in a css button? Hi guys, I've trawled the web for this query and have found many solutions, some work, some do not. Some are quite complex, some are fairly simple. I haven't quite found a technique I'm happy with just yet - or that I can get to work properly. Please download the attached .zip and open the index.html in a browser. Basically, that page will show a big main div tag container with 6 smaller divs within it, containing different sized backgound images, with text. I would like the text to be right aligned (which it is)... but also vertically aligned in the middle (and here lies the problem). With table cells it was easy, you aligned items right : middle. Not quite so easy with divs.... grrrrr.... they really shoulda sorted that aspect out ! Nevermind. I've written down the Background pixel heights of the images to save people time - as I suspect the solution may lie with something to do with calculating the heights of the div tags (?) If someone could perhaps jiggle the code and CSS a bit to help create the perfect, working vertically-aligned solution that'd be great - and then paste up either the full HTML code or full CSS code, or both please.... thanks a lot ! Cheers, Andy I have a div with blue background on the page below. It is is currently displaying horitzontally across the screen, with the images inside doing the same. I would like to vertically align it along the right side of the page, next to the text (which would be on the left). I'd also like the 'Property Search' within the blue, aligned below the photo of the house. Can anyone help me out? I'd like to KNOW how to do it and not have someone just send me an updated style sheet. Thanks. Styles attached. http://mulqueenconsulting.com/galese/ I'm trying to vertically align two divs inside a table cell. I have the cell's vertical-align property set to text-top because I want the first div to be aligned at the top of the td but I can't, no matter what I try, get the second div to align to the bottom. Is there a better way to accomplish this without nesting tables or is this the right way and I'm just missing something? I have #sidebar on my website and within the sidebar which contains two smaller divs (Calender and Archive) inside it which are styled by #sidebar div When I put these two divs in, Calender wasn't where I wanted it to be, at the very top of the sidebar. It was a few pixels lower. To fix I went to #sidebar div and changed the top margin to -1px and now it's at the very top. Is this a sensible fix? I've checked in Chrome 2.0, Safari 4.0, Firefox 3.5 and IE 8 and it looks to be OK but there's a nagging feeling in my head that I shouldn't have needed to do this. Here is the HTML: 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="content">jkjk</div>
<div id="sidebar">
<div id="calender"><h3>Calender</h3>
<p>fjkfjdklfjkljfsk</p></div>
<div id="active"><h3>Archive</h3>
<p>fjdkfjkfjk</p></div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
And here is the main.css: Code: @charset "utf-8";
/* Main style */
body { padding: 0; margin: 0; background-color: #000; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.wrapper {
text-align: left;
margin: 0 auto;
width: 750px;
}
/* Header */
#header {
background-color: #996666;
margin-top: 35px;
margin-bottom: 5px;
height: 90px;
padding: 0;
border: solid 1px #F00;
}
/* Nav Bar */
div#navcontainer {
background-color: #996666;
border: 1px solid #F00;
margin-bottom: 5px;
}
div#navcontainer ul {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
div#navcontainer ul li {
display: inline;
margin-left: -4px;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: #000;
text-decoration: none;
}
div#navcontainer ul li a:hover
{
color: #FFF;
}
#active a {
}
/* Main Content */
#content {
background-color: #996666;
float: right;
width: 500px;
border: 1px solid #F00;
margin-bottom: 5px;
}
/* Sidebar Styles */
#sidebar {
background-color: #996666;
float: left;
width: 243px;
border: 1px solid #F00;
}
/* The Divs that house Calender and Archive */
#sidebar div {
background-color: #800040;
}
/* The 'Calender' and 'Archive' text */
#sidebar div h3 {
background-color: #FF0;
font-size: 85%;
text-align: center;
text-decoration: underline;
margin-top: -1px; /* Remove this line and the calender 'box' should drop a few pixels from the top */
}
/* Footer */
#footer {
background-color: #996666;
border: 1px solid #f00;
clear: both;
padding: 0;
margin: 0;
}
If someone could take a look that would be great. I've commented it up for you so you should be able to find the divs easily. The code has been verified. I'm not a great web designer by any stretch of the imagination. I'm learning as I go along so hopefully someone with more knowledge can help me out. hi, i'm wondering whether anyone here knows something that i don't about this... here's some code: Code: <div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%"> <table width="380" height="80" border=0 cellspacing=0 cellpadding=0> <tr> <td valign="middle"> <div align="center" style="width:380px;"> <span style="font-size:11px; text-align:left;"> aligned to the left.<BR> but is it centered?<BR> i think not.<BR> </span> </div> </td> </tr> </table> </div> i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div. i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to.. thanks very much for looking at this. Sounds weird, but you know us designers are always looking for fresh ways to present content. I've not actually managed to make this work, even though it seems ridiculously simple; in effect it would just be full justification except any orphaned lines would be right-justified, not left. Any ideas? Hi, I am making a site and it is important the text is always positioned over the background image in the same place. I have managed to do this. When I zoom out the text stays in the correct position however when I zoom in (as if I am looking on a smaller screen) the text re positions to the edge of the browser. How can I keep the text in the same position on all monitors? Here is what I have so far (I am very new to css): #content { text-align: left; width: 1060px; padding: 0px 30px 0px 30px; margin-left: auto; margin-right: auto; } Thanks Cameron Wow I REALLY hate CSS. For hours I have been trying to figure this out: Here is some HTML Code:
<td>
<div class="linksbar">
<div class="linkstext">
link - link - link - link
<img src="imagelink.jpg">
<img src="imagelink2.jpg">
</div>
</div>
</td>
[CODE]
the CSS
[CODE]
.linksbar {
height: 28px;
background-image: url(bg.jpg);
}
.linkstext {
vertical-align: middle;
line-height: 28px;
font-weight: bold;
color: white;
}
First problem: in Chrome, the text rests at the bottom of the div. I want it in the middle. Second problem: in IE it looks like a mess. The text is sort of in the middle (more towards the bottom). the image links are at the very top. The image link height is like 20 or something. Not sure if this should go in HTML forum or here, but there is CSS involved, so... Anyways, have a page here with 3 images aligned right. (Currently they are floated right, but problem originally was seen with aligned right, changed to css float and problem is the same). http://www.4for4.com/draft_board/to...r_id=HOTSTOVE13 I only see the issue in Chrome, but in Chrome if I refresh the browser, about every third or forth time the text will not wrap around one of the bottom 2 images in the main content area (Hancock & Theron). The text will just lay over the top of the image. If I refresh it will work again, but randomly will not render correctly over one of the two images that is aligned right. Is this just a weird Chrome rendering issue? Or is there some property I can add to the image that will force this to not happen? Thanks a lot. I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want. simple example: CSS: Code:
a:link, a:visited, a:active {
font-size: 1em;
}
a:hover {
font-size: 1.5em;
}
HTML: Code:
<div>
<a href="#">Text</a>
</div>
Hi, I wonder if you can help me, In FF, this site has it's rows messed up. If you scroll down towards the bottom the colours become out-of-sync with the text. Can anyone help? (It works fine in IE and Opera) Thanks CSS Code (scroll down): http://jigsaw.w3.org/css-validator/...&usermedium=all Thanks again I have a navigation bar that contains four images (side by side) as well as three text links. They all live within a <div> with the following properties: #gNav { width:768px; height:19px; text-align:left; vertical-align:middle; } i need for the three text links to line up directly in the middle (vertically) of that <div>. To achieve this in IE6 and NN+, I attach the following style to the text. .nookum { font-size:.9em; vertical-align: 25%; color:#FFFFFF; } I just learned that the vertical-align property is not recognized by IE5 and IE5.5, so in those versions, the text aligns at the bottom of the <div>. Anyone know of any workarounds or other methods of vertically aligning text that will work in these two versions of IE? I am designing this page: theticketsguide.com/sample Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put vertical-align:middle for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding. Thanks, Brandon EDIT: no longer required All the text is at the top of the menus, how do i get them so they are in the center of the divs ? Code:
#navbar2 { float:right; position:relative; }
ul.menu2 { list-style-type:none; margin:0; padding:0; }
#navbar2 .leaf2 { width:70px; height:35px; float: left; display: inline; list-style-type:none; display:inline; text-align:center; color:#F7941D; font-weight:bold; font-size:12px; background-color:#2E2E2E; margin-left:8px; border-top-left-radius: 5px; border-top-right-radius: 5px; opacity:0.85; filter:alpha(opacity=85); }
#navbar2 li:hover, #navbar2 li.active { opacity:1; filter:none; }
#navbar2 li a { width:70px; height:35px; display:block; padding-top:3px; }
.leaf2 a { width:70px; }
Code:
<div id="navbar2">
<ul class="menu2">
<li class="leaf2<? if ($activePage=="home") {?> active<? } ?>"><a href="." title="Home">home</a></li>
<li class="leaf2<? if ($activePage=="item2") {?> active<? } ?>"><a href="2.php" title="2">item<br>2</a></li>
<li class="leaf2<? if ($activePage=="item3") {?> active<? } ?>"><a href="3.php" title="3">item<br>3</a></li>
<li class="leaf2<? if ($activePage=="item4") {?> active<? } ?>"><a href="4.php" title="4">item4</a></li>
<li class="leaf2<? if ($activePage=="item5") {?> active<? } ?>"><a href="5.php" title="5">item5</a></li>
</ul>
</div>
Greetings, I've set an anchor tag to display:block and have set the height to 80px. Unfortunately, it seems I am unable to move the text associated within the hyperlink to the middle (vertically) of the block. Any ideas on how this can be done? Using CSS, is it possible to vertically align centrally text to an image as you can using tables? A simple example using a table would be <table border="0" width="100%"> <tr> <td><img border="0" src="image.gif" width="609"height="115"></td> <td valign="middle">Ray did this</td> </tr> </table> Using CSS so far I've got... <p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this> The CSS for imglft is... .imglft{ float: left; margin-right: 30px; } I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work. You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm Ray I know vertical-align works great on one line of text, but I can't get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div? Code: echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">'; echo '<h1 >1/35 Scale House</h1>'; echo '</div>'; |
|||||||