Vertical Alignment of inner elements - html

I've two elements in <td> a <div> and some text. I would like to align <div> to top and text to middle of <td> How can I do that?
Edit: The should be vertically top aligned and not text inside div.

try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% tahoma }
.my-table { height:300px }
.my-cell { position:relative; border:1px solid green }
.my-div { position:absolute; top:0; left:0; border:1px solid red }
</style>
</head>
<body>
<table class="my-table">
<tr>
<td class="my-cell" align="center">
<div class="my-div">
I'm aligned to the top
</div>
This text is vertically centered.
</td>
</tr>
</table>
</body>
</html>

Like this?
<html>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td><div style="text-align: center;">some text</div></td>
</tr>
</table>
</body>
</html>
...Or
<html>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td align="center"><div style="text-align: left;">div text</div>some text</td>
</tr>
</table>
</body>
</html>
Remember to set the body height so you can see the vertical centering

by default any text in a table is vertical alligned, not sure why you need a div there. Its very difficult to get content to allign vertically inside a div

Related

I have a table and why my center cell is longer than others

I am working on a project in which I have to make a webpage. I have a table and when I run the code, the center cell is longer than the other cells.
table,td,tr{border: 1px solid red; }
<!document html>
<html>
<body>
<head>
<title>calculatoer</title>
<meta charset="utf-8">
</head>
<div>
<table>
<tr><th>ali</th><th>mohammad</th></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
</table>
</div>
</body>
</html>
You can add the following code to the existing code:
<table style="table-layout: fixed ;width: 100% ;">
<td style="width: 25% ;">
In addition to ensuring the header matches the number of columns via colspan you can fix the width by a percentage or a specific size using the td CSS class.
table,td,tr{border: 1px solid red; }
td
{
width: 100px;
}
<!document html>
<html>
<body>
<head>
<title>calculatoer</title>
<meta charset="utf-8">
</head>
<div>
<table>
<tr><th colspan="3">ali mohammad</th></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
<tr><td>s</td><td>s</td><td>s</td></tr>
</table>
</div>
</body>
</html>

HTML images resized when page refreshes

I'm working on a slideshow, and I'm getting a problem with the images being resized when the page refreshes. I've stripped my code down to the bare, gotten rid of all the javascript and as much of the html/css as I could while still getting the problem, and I simply cannot figure it out. The problem only arises on Safari. It doesn't happen every time I refresh, which makes it even more confusing.
I've posted a screenshot of how it should look, and then how it looks after I refresh the page. If you see anything in my code that could be causing this, please let me know.
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> Website </title>
<link href="slideshowRebuild.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="topDiv">
<iframe id="slideshowImg0" src="http://www.youtube.com/embed/xKBqSeYgQwo" frameborder="0" ></iframe>
</div> <!-- topDiv -->
<div id="imageDiv">
<table id="mediaMenu">
<tr>
<td class="subMenu"><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img>
</td>
<td class="subMenu"><img id="sub1" src="images/nash.jpg" alt="Steve Nash"></img>
</td>
<td class="subMenu"><img id="sub2" src="images/kobe.jpg" alt="Kobe Bryant"></img>
</td>
<td class="subMenu"><img id="sub3" src="images/giants.jpg" alt="San Francisco Giants"></img>
</td>
<td class="subMenu"><img id="sub4" src="images/tbrown.jpg" alt="Terrell Brown"></img>
</td>
</tr>
</table>
</div> <!-- imageDiv -->
</body>
</html>
CSS CODE
body{
background-color:#CCC;
}
#imageDiv {
border: 5px solid black;
width:93%;
position:relative;
background-color:#E0EAFF;
margin:3%;
}
#mediaMenu, #mediaMenu table {
margin:0;
padding:0;
border-spacing:0;
position:relative;
}
#mediaMenu td {
padding:0px;
margin:0px;
width:20%;
}
#mediaMenu img {
width:100%;
height:90px;
}
#contentText {
color:orange;
float:right;
width:39%;
}

html button CSS resize to fill div

I have read several similar questions, all involving use of width and height attributes either inline or in a class. However no matter how I seem to try it, it is not working.
Due to wanting to apply transformations to the button and text independently, I have had to use a class on the div and a sub class for the button. Stripping the code down, the width and height of the button are not filling the surrounding div.
I am working in Visual Studio 2008 and debugging against IE8 if that makes any difference.
HTML:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td >
<h1> TITLE</h1>
</td>
<td style="width:150px;height:40px;">
<div class="button-wrapper">
<button ID="RetrieveButton2" title="tooltip" runat="server" serverclick="RetrieveButton_Click">Search</button>
</div>
</td>
<td></td>
</tr>
</table>
</div>
</form>
</body>
</html>
CSS:
body
{
}
.button-wrapper
{
width: 150px;
height: 40px;
}
.button-wrapper button
{
width: 100%;
height: 100%;
}
It appears to be environmental. It was not happening on deployment, but it is all academic because requirements have changed so no longer using this code.

Center floating DIVs

Im trying to center 3 floating DIVs. It works if I give the parent DIV display:table; and the child DIVs display:cell; which will then act like a table. Is there another way ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
display:table;
}
#container div
{
float:left;
padding:5px;
display:cell;
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:yellow">Text 1</div>
<div style="background-color:lightgreen">Text 2</div>
<div style="background-color:lightblue">Text 3</div>
</div>
</body>
</html>
I think if you define the width, display: block, margin 0px auto, position:relative it should work.
Try this,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
width:200px;
}
#container div
{
float:left;
padding:5px;
display:cell;
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:yellow">Text 1</div>
<div style="background-color:lightgreen">Text 2</div>
<div style="background-color:lightblue">Text 3</div>
</div>
</body>
</html>
You need to assign width to the parent div like this :
#container
{
text-align:center;
margin:0 auto;
width:150px;
}
My Fiddle
Any reason why you don't want to use a table?
It might solve the purpose. Tables are not all that evil as they are made out to be ;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
}
#container td
{
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<table cellpadding="0" cellspacing="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td style="background-color:yellow">Text 1</td>
<td style="background-color:lightgreen">Text 2</td>
<td style="background-color:lightblue">Text 3</td>
</tr>
</table>
</div>
</body>
</html>

HTML design problem with alignment

Please consider the following 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>Sign In</title>
</head>
<body bgcolor="#DDDDDD">
<img src="images/logo.png" style="float:right; margin: 0 0 15px 15px;"/>
<div align="center">
<table border="0" width="500" style="border:groove;background:#DCD5F9">
<tr><td width="50%">User Name:</td> <td width="55%"><input type="text" size="35"/></td></tr>
<tr><td width="50%">Password:</td> <td width="55%"><input type="text" size="35"/></td></tr>
<tr><td width="50%"> </td> <td align="left" width="55%"> <input type="submit" value="Login"/></td></tr>
</table>
</div>
</body>
</html>
In browser I see that the <div> is not under the logo.png. Why? And how I can make it to be under the logo.png?
P.S. I would like to add that problem occured when I added the style="float:right; margin: 0 0 15px 15px;" or align="right" in <img> tag.
It's because you've added the float:right on your img which changes how the img will behave in the page flow. Forcing the div to clear content will fix your issue.
change this:
<div align="center">
to:
<div align="center" style="clear:right;">
From Wikipedia:
"A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item."