I got the following table, which should center my DIV:
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<div id="someCenteredDiv"></div>
</td>
</tr>
</table>
But the problem is that there is a global stylesheet which defines:
td {
vertical-align: top;
text-align: left; }
It seems like the stylesheet overrides the align and the valign attribute. And when I try to override the style with
text-align: center;
it simply doesn't change anything.
A div is a block element so it can't be centred using text-align: center. You could set it to display: inline-block; or give it a fixed width then use margin: 0 auto;
If your div has fixed width you can use:
margin: 0 auto;
On your div, to center it. Text-align will work only with inline elements, so if your div is not set to 'display: inline' (or inline-block) it won't be centered.
For over-riding a style you can use !important as follows
td
{
text-align: center !important;
}
And to center-align the div element you must use margin:0 auto along with some width assigned.
Related
Full Source Located At: http://nounz.if4it.com/Nouns/Applications/A_Application_1.NodeComponent.html
Problem: There is an HTML div that is being used for a web page header, ultimately containing a table that has three columns for the left logo, a center title, and a right logo. I set the div width to "100%" in the CSS statement but the div is not dynamically expanding, in a horizontal direction, to fit the width of the window.
In short, the SVG canvas, further down in the page, requires a wider div and I'd like to get all the other full width divs to expand horizontally to keep things neater.
The div code looks like:
<div class="div_Header">
<table class="table_Header">
<tr>
<td class="td_HeaderLeft"><img src="../../IMAGES/SITE_HEADERS/IF4IT_Logo.png" alt="Header Left Image" /></td>
<td><img src="../../IMAGES/SITE_HEADERS/Title_Gold_Shadow.png" alt="Header Center Image" /></td>
<td class="td_HeaderRight"><img src="../../IMAGES/SITE_HEADERS/NOUNZ_Logo_DarkBlueAndGold.png" alt="Header Left Image" /></td>
</tr>
</table>
</div>
The CSS statement being used is:
div.div_Header {
width: 100%;
border:2px solid White;
border-radius:7px;
background: WhiteSmoke;
font: bold 14px Arial;
font-family:Arial, Helvetica, sans-serif;
color:WhiteSmoke;
text-align:center;
}
I've tried adding "overflow: auto;" as is recommended in this other SO post on the topic. However, it doesn't seem to work.
Any thoughts on how best to fix the issue?
You need to 0 out the padding and margin on the body element to prevent the browsers native stylesheets from applying those attributes which prevents you from having a true 100% width on your divs:
body {
margin:0px;
padding:0px;
}
The actual answer is partially explained in this article, titled: "Using CSS "Display: table-cell" for columns". However, it does not cover the full answer, either. The code, below, includes the full answer and has been tested.
The first part of the answer is to ensure that the entire html and body envelopes are given a baseline...
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
The second part of the answer is to create a full width div that will act as a container for the child divs. As mentioned in the above article, the containing div should be told to "act like an HTML table element" by using the "display: table;" attribute...
div#div_header_container {
background: ' + headerBackgroundColor + ';
border:2px solid ' + 'White' + ';
border-radius:7px;
width: 100%;
display: table;
vertical-align: middle;
}
Third, each of the child divs (in this case there are three) should be given a width that is a percentage of the parent container. And, since the parent container has been told to act like an HTML table element, these child divs should be told to act like table cells using the "display: table-cell;" attribute. They should also be set to vertically align their elements in the middle using the "vertical-align: middle;" attribute, ensuring that each image in each child div will all align along their middles.
div#div_header_left {
width: 20%;
border-radius:7px;
display: table-cell;
vertical-align: middle;
}
div#div_header_center {
width: 60%;
border-radius:7px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
div#div_header_right {
width: 20%;
border-radius:7px;
display: table-cell;
vertical-align: middle;
}
Finally, the images that will be located within each child div that acts like a table cell should be decoupled from the divs, themselves and should be given their appropriate alignments...
img.image_header_left {
float: left;
}
img.image_header_center {
text-align: center;
}
img.image_header_right {
float: right;
}
When applied, the dom's source code will look like:
<body>
<div id="div_header_container">
<div id="div_header_left">
<img class="image_header_left" src="./Logo_Left.png" alt="Header Left Image" />
</div>
<div id="div_header_center">
<img class="image_header_center" src="./Logo_Center.png" alt="Header Center Image" />
</div>
<div id="div_header_right">
<img class="image_header_right" src="./Logo_Right.png" alt="Header Right Image" />
</div>
</div>
</body>
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
I have been playing around with div tag for sometime now and i tried doing the rounded corner div tag
<div id="y" style="border: 3px solid #000000;background: #b4ef05;
border-radius: 25px;width: 300px; height:200px;">
<div id="ds"style="width:100%; height:80%;border-top-left-radius: 2em;border-top-right-radius:2em; background: #b4ef05;"><span>
<img style="display: block; margin:auto;border: 0 none; position: absolute;left:40px;top:30px;" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg">
</span></div>
<div id="dscs"style="border-bottom-left-radius: 1em;border-bottom-right-radius:1em;width:100%;height:20%;background: #000000;color:#ffffff;"><span style="padding:35px;">sssd</span></div>
</div>
but i am not able to set the image alignment properly, this vertical-align:middle; doesn't work.
I need the image to come into the middle of the div automatically deciding the left and top. Also is this approach right to divide the div element into two to store 2 different values?
It's not good to use inline style in html elements :)
html
<img class="imgLackey" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg">
css
.imgLackey{
display: table-cell;
border: 0 none;
margin: 0 auto;
}
#imgCont{
display: table-cell;
vertical-align: middle;
}
#ds{
display:table;
}
fiddle
Display the parent (#y)as a table (display: table) and then set the span around the image as a table cell (display: table-cell).
This will allow you to use the positioning powers whilst keeping your code semantic.
See this updated codepen:
http://codepen.io/JRKyte/pen/ptaeI
Try adding display:table to the div that contain the image.
To the parent div of this image (id- 'ds') add "position:relative"
I have the following code that produces a background image in a table cell. I would like to put that image in the center of the cell.
<tr>
<td valign="top" width=<%=width%>>
<div id="loading"
style="background-image: url(spinner.gif); height: 16px; width: 16px;">
</div>
</td>
</tr>
I tried align=center but that didn't work and neither did text-align: center.
Centering your background image
You're looking for the background-position property.
You could also coalesce the properties into the shorter background property:
#loading {
background: url(spinner.gif) no-repeat center center;
}
Centering your element within your cell
One other reading of your question is that you want to center your loading animation in your table cell. If that's the case, I would encourage you to use the CSS properties text-align and vertical-align.
td.loading {
text-align: center;
vertical-align: middle;
}
With the following HTML
<td class="loading">
<img src="loader.gif" />
</td>
You can see a working demo online at http://jsbin.com/udehox/
it's worth noting that your DIV is a block element, and doesn't display inline by default. As such, you won't be able to "center" it, since it doesn't permit any space on its left or right.
You can force it to display as an inline element by attaching the display: inline or display: inline-block statements to it.
Try - background-position: center; that should do what you're looking for.
It looks like you are trying to center the div within the cell. You can set margins on the div or use relative positioning. Setting a background-position on the image won't help. The div is set to be 16x16 which I'm betting is the size of the image.
Try this one,
<tr>
<td valign="top" width=<%=width%> align="center" >
<div id="loading" style="background:url(spinner.gif) no-repeat center center; width:16px; height:16px;">
</div>
</td>
</tr>
It is working with this way
<td align="center">
But I want to use CSS class.
I defined class like this way but no luck
td
{
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
align: center;
}
Vertical align is working and text align is working for text. But it does not align div inside td with this way. I want to align div inside td.
div { margin: auto; }
This will center your div.
Div by itself is a blockelement. Therefor you need to define the style to the div how to behave.
I cannot help you much without a small (possibly reduced) snippit of the problem. If the problem is what I think it is then it's because a div by default takes up 100% width, and as such cannot be aligned.
What you may be after is to align the inline elements inside the div (such as text) with text-align:center; otherwise you may consider setting the div to display:inline-block;
If you do go down the inline-block route then you may have to consider my favorite IE hack.
width:100px;
display:inline-block;
zoom:1; //IE only
*display:inline; //IE only
Happy Coding :)