|
CSS - Vertically Center In Tables Vs Divs
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! Similar TutorialsHow 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? 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!!! 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. 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> 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>
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>'; 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! I'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> DIV blocks display incorrectly in IE8 and it's driving me insane.. I tried adjusting padding for each column amongst other things but no dice! Everything looks fine in FireFox and IE9. I'm not allowed to post links as a new user but the website is dmstriping dot com. You'll have to fix the below links yourself. Any help would be greatly appreciated! **Here are the css files:** dmstriping dot com/new site/css/style.css dmstriping dot com/new site/css/layout.css Web Site: dmstriping dot com/new site/index.html Hi guys, I am trying to display two forms with several elements on a page. I would like to place the two forms on the webpage so that one is displayed on the left and the other on the right of the screen. Something like this URL http://craigbaldwin.com/blog/wp-content/uploads/2008/12/52.jpg I have written the following test and the forms are placed correctly inside the left and right divs. Code:
<HTML>
<Head>
<style type="text/css">
div.wrapper {
position: relative;
clear: both;
width: 100%;
border : 1px solid #000000;
}
div.left {
float: left;
width: 50%;
background: #ffffff;
border : 1px solid #000006;
}
div.right {
float: right;
width: 50%;
background: #ffffff;
border : 1px solid #000001;
}
</style>
</Head>
<Body>
<div class="wrapper">Wrapper
<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
</div>
</Body>
</HTML>
A couple of problems with the above. 1. In Internet explorer the divs are aligned correctly but in firefox it gets all messy. 2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above) Thanks Hi, I'm new here. I wasn't sure if this was a javascript problem or a css (I'm thinking it's probably a css problem). I've been using css for about a year, all very straight forward until my friend asked me to make some changes to his site Bascially what he wanted me to do is 1. vertically center the entire site to the browser window, and 2. also vertically center the title and caption for his photogallery Below is a link to the site I'm working on Code: http://theo.mypreview.co.uk/gallery/test I added some javascript that I found searching on google which isn't working quite right. This is the javascript code Code: (function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);
If you follow the link posted to the site I'm working on you should see 3 thumbnails, 1st thumbnail is a video which is my main struggle to center vertically. The other 2 thumbnails are for images. If you click on one of the thumbnails for a picture you will see how the title and caption align vertically (not quite center)* For some reason the div containing the main image content ignores the height so the margins are too big. *Video is posted within the span class called "phototext" which is where the descriptions for the images appears. side note - this javascript seems stop IE6 and 7 from loading the page Thanks Larss I'm wworking on a CSS template and I'm trying to vertically align two divs.... one on top of the other with a five pixel margin between the two.... However, unless I use a bunch of HTML breaks (which will result in an uneven template), I can't figure out how to do it. I've tried to vertical-align them and etc. Any help is appreciated. Oh, I know my code could be a bit more clean, this is just a comp. I've also tested this on FF so far. I doubt IE will return favourable results either. My example: www.efacln.com/Untitled-1.html My CSS code: Code:
#container
{
MARGIN: 5px;
}
#header_container
{
border-color: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-LEFT: none;
BORDER-RIGHT: none;
WIDTH: 100%;
}
#header_content
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-TOP: none;
BORDER-BOTTOM: none;
WIDTH: 600px;
HEIGHT: 100px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
}
#kirk_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
WIDTH: 550px;
HEIGHT: 100px;
FLOAT: left;
POSITION: absolute;
MARGIN-TOP: 5px;
MARGIN-RIGHT: 2.5px;
}
#navigationblock
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: THIN;
WIDTH: 410px;
POSITION: relative;
FLOAT: RIGHt;
MARGIN-TOP: 5px;
MARGIN-LEFT: 2.5px;
}
#scott_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
width: 410PX;
MARGIN-TOP: 1 px;
MARGIN-TOP: 5px;
}
</STYLE>
Suppose I have a few tables I want to format vertically. If they are quite wide, chances are simply doing <table id="a">...</table> this will probably happen automatically. Ever, with a wide enough screen they might format horizontally. To fix this, I could to the following: <table id="a">...</table><br><table id="b">...</table><br><table id="c">...</table> but unfortunately, <br> also adds extra unwanted spacing. Is there a was to CSS the <br> tag to avoid this, or is there a CSS method to indicate that each successive table should be below the last, not to the right? Skolem 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? Is there a way to get the #middle div to stretch vertically to fill up the remaining space of the page, say with min-height etc.? Thanks, Mark 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body{
min-height:100%;
height: 100%;
}
html{
border: 1px solid red;
}
body{
border: 1px solid blue;
}
#container{
border: 1px solid green;
}
#top{
border: 1px solid yellow;
}
#middle{
border: 1px solid black;
min-height: 100%;
height: auto;
}
#bottom{
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="container">
<div id="top"> </div>
<div id="middle"> </div>
<div id="bottom"> </div>
</div>
</body>
</html>
Hi everyone, I am working on a conceptual design with basic js rollovers and css. When I center the divs I get a small horizontal space between the divs. I have only tested this in firefox. My css for each div is: #foo{ margin: 0 auto; text-align: left; background: #006600; width: 800px; } and the page can be seen he bdgplans.com/concept/roll2.html Hello. I need some help with positioning css. I want a div in the center of the page with a width of 780 px and a height of the entire page. On the left I want a background image aligning to the right and on the right side I want a background image aligning to the left. These two div's must be stretching to the whatever size your screen is. I just can't get it done. Right now I have this, but well, it's not really working properly. PHP Code: .left { width:30%; margin-bottom:0px; background-position:top right; float:left; height:100%; background: url("../img/left.jpg") top right repeat-y; } .right { width:30%; margin-right:0px; margin-bottom:0px; float:left; height:100%; background: url("../img/right.jpg"); } .centerpositie { width: 40%; //border:1px solid black; float:left; top:0px; background-color:#FFFFFF; width:780px; height:100%; } Hi. How would I go about horizontally centering a number of divs within another parent div which has a set width of 500px? There maybe 2,3 or 4 divs of varying length within the parent div but no matter the number I always want them centered within the parent div. |............................................................| |............................................................| |............................................................| | <---DIV---> | <---DIV---> | <---DIV---> | |............................................................| |............................................................| |............................................................| |
|||||||