I have used <div align="center"> and put the image inside the div tag. Well the image is at the center but not at the middle. The image started from the top of div tag and placing at the center but I want it to be placed at the middle not at the top.
When I googled it I found <td valign="middle">. and its working as I intended and below is what I have designed after googling,
<div align="center" style="width:510px;height:510px;margin-left:300px">
<table style="width:510px;height:510px">
<tr>
<td align="center" valign="middle">
<img id="main" src="dock.jpg" style="max-width:500px;max-height:500px"/>
</td>
</tr>
</table>
</div>
But using a table for these purpose is it harmful ? Because I have tried <div align="center" style="vertical-align:middle"> but does not seem to work as i expected and please let me know if there is a way to do without table ?
You shouldn't be using <div align="center"> either really, its been deprecated:
http://reference.sitepoint.com/html/div/align
This attribute is deprecated. The correct method for aligning a div is
to use the CSS text-align attribute.
I'm not certain on the best way of vertically aligning div's (although you may find this article worth reading), but I know that you are right, you shouldn't use tables as a solution. Table should only be used when creating a table of data results for example, never layout purposes.
This will help you i think so:
just give #to div. and then style it in CSS as follow:
position: absolute;
left: 50%;
right: 50%;
width: _px;
height: _px;
margin: half of the width, half of the height;
Try this. May help you.
<div style="width:510px;height:510px;border:1px solid;margin:auto;">
<table style="width:100%; height:100%;">
<tr>
<td align="center">
<img id="main" src="wp1.JPG" style="max-width:300px;max-height:300px;"/>
</td>
</tr>
</table>
</div>
Related
First, I'm new to mobile development, so apologies in advance for what might be a simple question. But I've researched this for a couple of days and just can't seem to get it to work.
I can't get a particular DIV to render at the appropriate height when I switch to a mobile view. All the other divs work fine in both desktop and mobile. The div in question looks fine in the desktop view but not in mobile.
Here's a link to the page: http://echoflyfishing.com/2016
The div in question is the "DOUBLE HAND". I want it the same height as the "SINGLE HAND" above it. No matter what I do, I can't get it to size correctly. I know there's a simple solution but I've tried everything I can think of in terms of height and am stumped.
Here's the relevant HTML:
<div class="sh_container_m">
<table cellpadding="0" cellspacing="0" class="sh_container_table_m">
<tr>
<td style="font-size: 3.5vw;padding-top: 2vw; padding-bottom: 2vw;"><p>Single Hand</p></td>
</tr>
</table>
<div class="sh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the single hand image carousel will be</td>
</tr>
</table>
<div class="dh_container_m">
<table cellpadding="0" cellspacing="0" class="dh_container_table_m">
<tr>
<td style="font-size: 3.5vw;"><p>Double Hand</p></td>
</tr>
</table>
<div class="dh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the double hand image carousel will be</td>
</tr>
</table>
</div>
</div>
</div>
</div>
And the CSS:
.dh_container_m
{
display: block;
visibility: hidden;
margin: 0 auto;
width: 100vw;
text-align: center;
}
.dh_container_table_m
{
margin: 0 auto;
width: 100vw;
border: none;
background-color: #fbaa27 !important;
}
Did you mean for your dh_images_container_m div to be nested inside the sh_images_container_m div? It is going to take on it's "parents" properties which may also be contributing to some of your sizing issues.
On a side note, you have your links to the css files in the header as type="text". They should be type="css/text".
use px not vw because it's percentage and define the width of both divs as you want simple one more suggestion is use bootstrap css framework it's better for you you can make responsive site easily with the help of it.
The code below should make the navigation panel centered and fixed. However, it does not meet the "centered" criteria, only fixed.
Any ideas what I have done wrong ?
<tr style="position:fixed">
<td class="bgnavigator" "align="center" height="40" valign="top">
<table align="center" ><tr><td>{NAVIGATOR}</td></tr></table>
</td>
</tr>`
If you you want to center table just add this CSS to the root table element:
margin-left: auto
margin-right: auto
Furthermore you shouldn't use deprecated inline css-attributes like align, valign. It's deprecated. Use CSS only styles.
Here you are: http://jsfiddle.net/mVzsY/
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.
I can't get right positions for my tables. I have code like this:
<div style="width: 1270px;">
<div>
<table style="float:left>
<tr><td>something1</td></tr>
<tr><td>something2</td></tr>
</table>
<img src="some_sorce">
<table style="float:left>
<tr><td>something3</td></tr>
<tr><td>something4</td></tr>
</table>
</div>
</div>
And I have two problems:
First I want tables to be placed in bottom of containing div. I try some kind of "vertical-align" in some places but it fail for me. Secoundly i want the image to be in center of div, "text-align: center" don't do the trick. Could someone help me anyhow?
Instead of:
<table>
<img src="some_sorce">
it should be:
</table>
<img src="some_sorce">
And by default images have display: inline attribute so You need to do something like:
<img src="some_sorce" style="display: block">
to center image
I'm trying to build a single row css table with multiple cells that has text that is vertically centered inside the cells. Basically the table behaviour I am trying to mimic with css is this:
<table width="100%" height="54" border="0" bgcolor="red">
<tr>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
</tr>
</table>
So that my code is semantically correct I want to use divs to achieve the same effect.
<div class="job_wrapper">
<div class="info">
<div>01</div>
<div>Campaign 001</div>
<div>DEMO Client</div>
<div>128</div>
<div>449</div>
</div>
</div>
Problem is that the workaround for display:table-cell in IE involved using the float property which overrides the display value to block. hence I lose the vertical centering of text in a table cell.
Is there a workaround to display:table-cell in IE that still gives me the ability to center text vertically in IE?
Cheers
check out the style sheet from http://jogger.pl/404.
they have an interesting workaround in there.