I have a table which surrounds all the content of a webpage, I would like to center this table horizontally and vertically inside the browser window. It is a much smaller content area than that of the average browser so there should be no issues.
Any help is greatly appreciated.
add this code to the top of the html file within the HEAD tags:
<style>
table
{
align: center;
vertical-align:middle;
}
</style>
if you want to center your table.you can use margin-left:auto;
if you want to center your text inside table you can use text-align:center;
Related
I am working on a polymer app. I need to place a button which will always at the bottom of the screen. how can I achieve the same.
Just make its position absolute in the main document and set its bottom and right margins. Making the position absolute removes the element from the standard flow and makes the other elements ignore it.
In order to place the button(s) at right bottom of the page use the following class:
<style is="custom-style">
.bottom-right {
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
The following is an example of two buttons placed at bottom right of the page. I placed the two buttons within a paper-material element to move both buttons together.
<paper-material elevation="0" class="bottom-right">
<paper-button raised>
<iron-icon icon="icons:save"></iron-icon>Save
</paper-button>
<paper-button raised>
<iron-icon icon="icons:cancel"></iron-icon>Cancel
</paper-button>
</paper-material>
Quite often the buttons are placed within a paper-dialog, in that case one desires to place buttons at bottom right of the dialog. In order to move buttons relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed), change position to absolute as in the following snippet.
<style is="custom-style">
.bottom-right {
position: absolute;
right: 10px;
bottom: 10px;
}
</style>
I am using flexSlider in a full width mode
for a site that I'm building.see here:
http://clients.tipoos.com/glam/
notice that the site hasthis full width section for the slider but all other content
is centered using a consistent class called: .main
What I'm trying to accomplish seems pretty easy but I can't make it work:
I would like to keep the slider full width but center the arrows like so:
I tried writing small Jquery to wrap the arrows with div but it didn't work.
neither wrap nor wrapAll was working..
will appreciate any help
Thanks
Found a solution. hope it will help anyone here.
in order to center the arrows but still having a full width slider
I used the follwing CSS:
.flexslider .flex-direction-nav {
margin: 0 auto !important;
max-width: 980px;
position: relative;
}
Explanation:
margin: 0 auto !important;
this centers the arrows container
max-width: 980px;
giving a fixed width to depending on your website width
position: relative;
this makes the magic. it allows the arrows to be positioned inside the main div
I also added negative top position to my arrows but that's only in my case
hope that helps anyone.
Does anyone see what I'm doing wrong? Html ignores the .wrapper width which is 960px. If I'm right the text inside the .wrapper div should appear in a box with a 960px width but it totally ignores the css.
jsfiddle.net/4pz89/
Try to add
overflow: hidden;
This will prevent browser to show content after width. You should write your text in paragraph to wrap the text
DEMO
specify float:none; for wrapper div
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
I have a website that is perfectely centered aligned. The CSS code works fine. The problem doesn't really have to do with CSS. I have headers for each page that perfectely match eachother.
However, when the content gets larger, Opera and FireFox show a scrollbar at the left so you can scroll to the content not on the screen. This makes my site jump a few pixels to the left. Thus the headers are not perfectely aligned anymore.
IE always has a scrollbar, so the site never jumps around in IE.
Does anyone know a JavaScript/CSS/HTML solution for this problem?
I use
html { overflow-y: scroll; }
To standardize the scrollbar behavior in IE and FF
FWIW: I use
html { height: 101%; }
to force scrollbars to always appear in Firefox.
Are you aligning with percentage widths or fixed widths? I'm also guessing you're applying a background to the body - I've had this problem myself.
It'll be much easier to help you if you upload the page so we can see the source code however.
#middle
{
position: relative;
margin: 0px auto 0px auto;
width: 1000px;
max-width: 1000px;
}
is my centered DIV
Well you don't need the position: relative; - it should work fine without it.
I take it that div has to be 1000px wide? It would still be a lot easier to answer this with the actual website.