|
CSS - Vertically And Horizontally Center Two Lines Of Text
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>'; Similar TutorialsI'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong? <DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV> Hi Guys, I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image. Here's what I have so far. img.top {vertical-align:text-top;} <a href="http://company.com/graphics/thumb.jpg"> <img class="top" src="http://company.com/graphics/thumb.jpg"> </a> <a href="company.com">sample text</a> <a href="company.com">second line</a> Any ideas? I've tried like every switch for the vertical-align property... 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>
Hi there, I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work. How can I center them vertically? Thanks! Hey, I've been doing a fair amount of research on centering a page vertically and horizontally with CSS, and before I begin constructing my page, I thought I'd get some input from you guys. Basically, the page is going to look like this Any advice would be greatly appreciated. Thanks! is it possible to center something vertically inside a container without the use of tables? I know you use text-align to center horizontally, but what is used for vertical alignment? vertical-align doesn't work. PHP Code: <div style="width:100% height:100%; text-align:center;"> <!-- code goes here --> </div> thanks goran. hi i would like to display some pictures on my site, and be able to scroll horizontally, i have simply listed the pictures in the xhtml and my css cose is below. at the moment the pictures still stack up vertically so the horizontal scroll bar cannot be used. can anyone help? thanks div.galleryscroll { height: 125px; width: 694px; position: absolute; top: 540px; left: 280px; z-index: +1; overflow-y: hidden; overflow-x: scroll; } I'm trying to tile a background image horizontally with a vertically tiled background image centered on the page. Being new to css and not particularly fluent in html (although more so than css), I have no idea how to go about doing this or if it is even possible. I do have both images working separately though. Help would be appreciated. -alexa I've been playing around with centering an absolutely positioned div and in this post is the method I've come up with. I've tested it in firefox and IE but am curious as to whether it works in opera and if there are better ways of doing it. The div needs to be absolutely positioned because I'm using top & bottom to set it's height. Here's the code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Center Test</title>
<style>
body
{
margin: 0px;
height: 100%;
}
.centered
{
position: absolute;
border: 2px solid black;
width: 196px;
background: orange;
margin: auto;
top: 100px;
left: 0px;
right: 0px;
bottom: 100px;
min-height: 50px;
height: expression((document.body.clientHeight < 250 ? 50 : document.body.clientHeight - 200 ) + 'px');
left: expression('auto');
right: expression(((document.body.clientWidth < 200 ? document.body.clientWidth - 200: document.body.clientWidth / 2 - 100 )) + 'px');
}
</style>
</head>
<body>
<div class='centered'>
I'm a centered absolutely positioned div.
</div>
</body>
</html>
Question title: A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically Hello I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google. If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome. I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample) f.e line 1 : value_one - ( some_text - value_two (right justified) ) line 2 : value_one - ( some_text - value_two (right justified) ) line 99:.... e.t.c Column one has a fixed width of 32px. 'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically. Finally I need the color behind column one be different then the column 2 and 3. So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily. But my problem is that when I scroll horizontally that my first column scrolls away to the left. Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically? Is there any way to align an element vertically? I have, for instance, some <a>'s in some <td>'s which are styled thusly: css Code: Original - css Code td a { display: block; width: 100%; height: 100%; }
so that they fill the entire <td>. The problem is that if the table row expands due to word wrap, the links stick to the tops of the cells instead of centering vertically as is the default behavior of inline elements in a table. I've tried padding: auto; on the links, that didn't do anything. How can I fix this? Hi I'm new so please bear with me... My client wants his website (fixed height of 400px with scrolling text) in the center of the page. This is the site: wanteddesign.co.za/caffeverdi/index.html As you can see it's centered in a large resolution but in 1024x768 it's not... how do I edit the CSS so it's displayed in the middle of the page? another thing: the Facebook icon shows in the right place in my resolution but in the smaller resolution of 1024x768 it's in the middle of the page. help help help pleaseeeeee, thanks!!! Hi. I've the following and I couldn't have the right div to vertically align when the left div have multiple lines. I tried vertical-align:middle on the right div and doesn't work. And this is driving me crazy. I hope anyone can help me. Thank you. <div style="width:800px"> <div style="width:730px;border:solid 1px red;float:left;"> LOTS OF CONTENT... MORE THAN 1 LINES </div> <div style="width:50px;float:right;border:solid 1px red;"> CLOSE LINK SHOULD BE HERE LATER </div> <div style="clear:both;"></div> </div> How would I center an image vertically in a div that has varying height? Normally I would set a line-height and then a vertical-align but the container is of varying size dependent on content . The only way I can think of is to make the image a background and do background-position: center center; Is that the only workaround? I have a horizontal nav menu I've created using <ul> and <li> inside a <div> The problem is I can't get it to vertically center. I tried using padding and/or margin and it didn't work for all browsers. Here is the html: Code: <div class="top_nav"> <ul> <li><a href='/'>HOME</a></li> <li><a href='menu'>MENU</a></li> <li><a href='catering'>CATERING</a></li><li>DETAILS</li> <li><a href='photos'>PHOTOS</a></li> </ul> </div> and the CSS: Code:
.top_nav {
margin: 0 auto 15px auto;
height: 25px;
padding: 10px;
clear: both;
}
.top_nav ul {
list-style: none;
text-align: center;
}
.top_nav li {
padding: 0 25px;
font-family: "Palatino Linotype", "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
display: inline;
letter-spacing: 2px;
}
.top_nav li a {
color: #FFF;
text-decoration: none;
}
.top_nav li a:hover {
text-decoration: underline;
border-bottom: 3px solid #660000;
}
It stays vertically positioned at the top Hi all, I know there are certain tricks to vertically center texts or images in a div area. And I have read somewhere there are plans to avoid current complexity compared with tables. For example, provided I use same CSS... Code:
div,table{
width: 250px;
height: 100px;
border: 1px solid red;
text-align: center;
}
...we optain well vertically centered text in this table... Code: <table> <tr><td>this IS vertically centered</td></tr> </table> ...but not in this div based one... Code: <div>this IS NOT vertically centered</div> I ask, do you know an easy way to acomplish the same we get with tables? Thanks! I haven't been able to find an answer to this anywhere and am hoping someone here can help. I'm trying to space the text inside my navigation div so that it stretches evenly accross the div rather than being centered and having a bunch of space on either side. Here's my current html... Code: <div id="navigation"> <p class="nav"><font color="#ffffff" face="verdana" size="3"> <img align="center" border="0" width="1" height="2" src="navdot.gif"><br /> Link 1 | Link 2 | Link 3 | Link 4 | Link 5 </font></p> </div> And my css... Code: #navigation {
width:750px;
height:30px;
background-image:url('navigation.gif');
background-repeat:no-repeat;
margin-top:0px;
}
Any help would be much appreciated. Thanks! EDIT: I think I got it figured out... well, it looks good on my end and I checked it across 6 larger browsers anyways. Here's the html now... Code: <div id="navigation"> <img align="center" border="0" width="1" height="2" src="navdot.gif"> <table align="center" border="0" width="750"> <tr><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 1</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 2</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 3</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 4</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 5</font></center> </td></tr></table> </div> I used a 1x2px image to lower the text so it wasn't sitting right up against the top of the div, then I used a table inside of it and text without using paragraph tags. There's gotta be a cleaner way of doing this though, isn't there? It looks great cross-browser, but I'm thinking there's gotta be a way to do this without a table. 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? 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? |
|||||||