i have one div and some text inside it. to make my content horizontally and vertically center i use a css. it works fine in firefox but content not being vertically center when test the following code in IE6.
so please guide me what i need add or change in my css.
my html code is
<html>
<head>
<title>Vertical Centering</title>
<style>
.content {
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: green;
height: 200px;
width: 250px;
}
</style>
</head>
<body>
<div class="content">
Hello.
</div>
</body>
</html>
please have look at my css and tell me why it is not working in IE also please rectify my css in such a way as a result it should look same in all the browser.
thanks
you can wrap your text with a span and then set position:relative and top:45%;
.content span {
position:relative;
top:48%;
}
live example: http://jsbin.com/ovabo4/3
Here you will find a great guide: Vertical centering with CSS
A good method is to do this, so it is always exactly in the middle (only works if you have a fixed height div)
<div class="centered"></div>
html, body{height: 100%;}
.centered{height: 500px; width: 500px; position: relative; top: 50%; margin-top: -250px; /* Just use a negative margin that is half the height of your element */
Related
What CSS will center the entire relatively-positioned body of ANY webpage, with no scrollbars, and equal clipping of overflow content on left and right of the viewport?
When the page renders, if the widest element is wider than the viewport, then i want the left and right sides of the content to "fall off" the sides of the screen. Overflow on both left and right should be clipped/hidden.
The width of the content is unpredictable, and may often be wider than the viewport. We should always see the middle slice, no scrollbars.
Not duplicate question
Please don't mark "duplicate". No answer in these questions achieves my desired aim. I've tested every one of them.
How to align entire html body to the center?
align body to center - centering body
How to center body on a page?
Unlike common answers in the above questions, I do not have the option to wrap the content in a div. I can only work with the html and body tags.
Required HTML:
This question doesn't allow to alter this html. Your CSS answer should work with any webpage. These element are just examples-- there would be many more, unpredictable elements in the html. You cannot wrap the content in a container div. Your CSS answer should show the center slice of the page, clipping off to the left and right whatever content doesn't fit on the screen.
<html>
<body>
Overflow to left
<div id="wider">Center-screen</div>
</body>
</html>
Required CSS
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
}
body {
position: relative;
}
You can't change this CSS, only add new CSS. Need position:relative on body.
The #wider element is just an example of wide content. The real-world usage would include many more elements of unpredictable width.
Output should render something like the image below, with no scrollbars. The text "Overflow to left" should be clipped off the screen to the left. The words "Center-screen" should be dead-center, horizontally.
Non-working solution 1:
The answer below, from a similar question, doesn't appear achieve my goal:
html,
body {
height: 100%;
}
html {
display: table;
width: 100%;
}
body {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Non-working solution 2:
Another answer from a similar question doesn't seem to work for my scenario:
body {
width: 80%;
margin-left: auto;
margin-right: auto;
}
Fiddle:
This fiddle contains my HTML, along with the above failed answer. Feel free to test your answer in this fiddle.
Desired output from HTML above:
You just need absolute positioning + transform:translate style centering.
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
}
body {
position:absolute;
left:50%;
transform: translate(-50%);
margin:0;
overflow-x:hidden;
}
<html>
<body>
Overflow to left
<div id="wider">Center-screen</div>
</body>
</html>
If I understand you correctly, you could do something like this:
body {
overflow-x: hidden;
}
#wider {
width: 10000px;
border: 1px solid black;
text-align: center;
position: relative;
left: 50%;
transform: translate(-50%);
}
Overflow to left
<div id="wider">Center-screen
</div>
You Just add text align center in css code
HTML
<html>
<body>
Overflow to left
<div id="wider">Center-screen</div>
</body>
</html>
css
#wider{
text-align:center;
}
In order to achieve horizontal centered body,you will need to to use elements inside a div with these properties "flex-center flex-column",
<h5 class="animated fadeIn mb-3">Hello Mate.</h5>
<p class="animated fadeIn text-muted">Mostafa Harb</p>
these properties are what you want to achieve your aim :
<html>
<style>
.entire-div{
text-align: center;
align-items:center;
align-content:center;
justify-items:center;
align-items:center;
}
</style>
<body>
<div class="entire-div">
<h1>Hello</h1>
</div>
</body>
</html>
I have setup a site with content region of fixed width and variable height, horizontally and vertically centred, based on the css and html found in this answer.
That works pretty fine in all Browsers I have tested, even in IE (11). However the page needs to work in fullscreen mode, too and if i run it in ie, the content goes to the upper left corner.
here is my html:
div.wrapper-1 {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
div.wrapper-2 {
display: table-cell;
vertical-align: middle;
}
div.wrapper-3 {
margin: 0px auto;
width: u($page-width);
}
<body>
<div class="wrapper-1">
<div class="wrapper-2">
<div class="wrapper-3">
<!-- does all my content go -->
</div>
</div>
</div>
</body>
What can I do to make that work in fullscreen, too?
Thanks for help!
Finally, after digging around I could get it up and running!
I added that to my css:
html {
width: 100%;
height: 100%;
}
On your div.wrapper2 and 3 set a position:relative; This will keep it relative to your div.wrapper1 and should solve that issue. This is also found on the second part of the answer you linked.
I would like to build a fluid layout and would like to achieve something like
width:100%-200px;
i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?
Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window.
You could try the following:
body {
padding:0 2%;
}
#content {
width:96%;
}
http://jsfiddle.net/YYhvT/
Use position absolute...
#content {
position: absolute;
left: 0;
right: 200px;
}
See my Fiddle.
PS Advantage is that you don't need values on other elements.
You can put a container around the content and give it 200px left/right padding. This should do the trick (at least, from what I understand of what you are trying to accomplish). Also see this code example:
<!doctype html>
<html>
<head>
<style type="text/css">
body { margin: 0 50px; }
#container { padding: 0 200px; background: #FF0000; }
#content { width: 100%; background: #00FF00; }
</style>
</head>
<body>
<div id="container">
<div id="content">
Here goes my content
</div>
</div>
</body>
</html>
Note that the body margin is just for illustrating purposes, to let you see the background differences.
(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.)
here is my solution,
html:
<div id="content" class="content">
My Content
</div>
css:
.content {
position: absolute;
right: 100px;
left: 100px;
background-color:#A5112C;
}
and link to it: http://jsfiddle.net/MPYHs/
also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif
hope it helps,
regards
How do I align a <div> which contains an image (or flash) vertically with CSS. Height and width are dynamic.
This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.
The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.
The HTML:
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
And the CSS:
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
Note that the span's are also required for IE7. In every other browser, the span's may be div's.
You can do this by using inline-blocks, one with height: 100% (and same heights for HTML and BODY) and vertical-align: middle.
Example 1: http://jsfiddle.net/kizu/TQX9b/ (a lot of content, so it's full width)
Example 2: http://jsfiddle.net/kizu/TQX9b/2/ (an image with any size)
In this example I use spans, so It would work in IE without hacks, if you'd like to use divs, don't forget to add in Conditional Comments for IE .helper, .content { display: inline; zoom: 1; }, so inline-blocks would work for block elements.
In addition to the other answers here, the CSS3 flexible box model will, amongst other things, allow you to achieve this.
You only need a single container element. Everything inside it will be laid out according to the flexible box model rules.
<div class="container">
<img src="/logo.png"/>
</div>
The CSS is pretty simple, actually:
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
I've omitted vendor-prefixed rules for brevity.
Here's a demo in which the img is always in the centre of the page: http://jsfiddle.net/zn8bm/
Note that Flexbox is a fledgling specification, and is only currently implemented in Safari, Chrome and Firefox 4+.
I would recommend this solution by Bruno: http://www.brunildo.org/test/img_center.html
However, I ran into a problem w/ his solution w/r/t webkit. It appears that webkit was rendering a small space at the top of the div if the empty span was allowed to be there. So, for my solution I only add the empty span if I detect the browser to be IE (If someone figures out how to get rid of the space, let me know!) So, my solution ends up being:
HTML:
<div class="outerdiv">
<img src="..." />
</div>
CSS:
.outerdiv {
display: table-cell;
width: 200px;
height: 150px;
text-align: center;
vertical-align: middle;
}
.ie_vertical_align * {
vertical-align: middle;
}
.ie_vertical_align span {
display: inline-block;
height: 150px;
width: 0;
}
And if I detect the browser to be IE I add an empty span element before the img tag and a css style so it looks like:
<div class="outerdiv ie_vertical_align">
<span></span>
<img src="..." />
</div>
Here's a JSFiddle with this code.
Dušan Janovský, Czech web developer, has published a cross-browser solution for this some time ago. Read http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you don't care about IE7 and below, you don't have to use multiple nested divs. If you have a div that you want to align vertically, that div is within some container (even if the container is your <body>). Therefore, you can specify display: table-cell and vertical-align: middle on the container, and then your div will be vertically centered.
However, if you do care about IE7 and below, you will need an additional container to make it work (yes, via a hack).
Take a look at this fiddle. It displays correctly in IE6-9 and other major browsers. #container2 is present solely for IE7 and below, so if you don't care about them, you can remove it as well as the IE-specific conditional styles.
Set the image as background of the div and align it center
try the 50% padding trick:
<html>
<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line;
text-align:center; vertical-align:bottom;
padding: 50% 0 50% 0">test</div>
</body>
</html>
This is possible if you know the height of the image or flash object to be centered. You don't need to know the container's height/width, but you do need to know the contained height/width.
It's possible using float, clear and negative margins. Example: www.laurenackley.com homepage.
html
<div id='container'><!-- container can be BODY -->
<div id='vertical-center'> </div>
<div id='contained-with-known-height'>
<p>stuff</p>
</div>
</div>
css
#vertical-center{
height:50%;
width:1px;
float:left;
margin-bottom:-50px;/** 1/2 of inner div's known height **/
}
#contained-with-known-height{
height:100px;
clear:left;
margin:0 auto;/** horizontal center **/
width:700px;
text-align:left;
}
#container{/** or body **/
text-align:center;
/** width and height unknown **/
}
If you don't know the inner elements width/height. You are out of luck with <div>. BUT -- table cells (<td>) do support vertical-align:middle; If you can't get it done with the div stuff above, go with a table inside the container, and put the div you are centering inside a td with vertical-align middle.
I expected the two span tags in the following sample to display next to each other, instead they display one below the other. If I set the width of the class span.right to 49% they display next to each other. I am not able to figure out why the right span is pushed down like the right span has some invisible padding/margin which makes it take more than 50%. I am trying to get this done without using html tables. Any ideas?
* {
margin: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
border: none;
}
div.header {
width: 100%;
height: 80px;
vertical-align: top;
}
span.left {
height: 80px;
width: 50%;
display: inline-block;
background-color: pink;
}
span.right {
vertical-align: top;
display: inline-block;
text-align: right;
height: 80px;
width: 50%;
background-color: red;
}
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div class='header'>
<span class='left'>Left Span 50% width</span>
<span class='right'>Right Span 50% width</span>
</div>
</body>
</html>
Thanks for the explanation. The float:left works beautifully with expected results in FF 3.1. Unfortunately, in IE6 the right side span renders 50% of the 50%, in effect giving it a width of 25% of the browser window. Setting its width to 100% achieves the desired results but breaks in FF 3.1 which is in standards compliance mode and I understand that. Getting it to work both in FF and IE 6, without resorting to hacks or using multiple CSS sheets has been a challenge
float: left;
Try adding that to span.left
It will cause it to float to the left (as suggested by the syntax).
I am not a CSS expert by any means so please don't take this as unarguable fact but I find that when something is floated, it makes no difference to the vertical position of things below it.
If you float the span.right to the right then add text beneath them you should get some interesting results, to stop these "interesting results" you can use "clear: left/right/both" which will cause the block with the clear styling to be under anything floated to the left/right/both. W3Schools have a page on this property too.
And welcome to Stackoverflow.
This is because inline and inline-block include whitespace (in your case the line break) between the elements. In your case the combined width of the elements is 50%+50%+whitespace > 100%.
You should either put the two elements on the same row in your HTML document (without space)
<div class='header'>
<span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>
Or use HTML comments
<div class='header'>
<span class='left'>Left Span 50% width</span><!--
--><span class='right'>Right Span 50% width</span>
</div>
I myself prefer the latter.
I don't like this hack but it seems to do the job both in Firefox and IE6:
span.right {
vertical-align:top;
display:inline-block;
text-align:right;
height:80px;
width:50%;
*width:100%;
background-color:red;
}
Note the *width: 100% which seems to satisfy IE6's requirement and is ignored by Firefox.