I'm looking for a way to center a div horizontally in the page on Google Chrome.
I tried using margin: auto; but I've read that this function is not supported in Google Chrome. As a result my div stays aligned to the left side of the screen.
If I use, for example, margin-left: 100px; the div does move toward the center of the page, but I don't want to center it manually.
HTML:
<body>
<div id="header">
<p>John Doe</p>
<p>email</p>
</div>
</body>
CSS:
body
{
background-color: #f0f0f0;
}
div
{
border-radius: 5px;
}
#header
{
position: fixed;
background-color: #3399ff;
color: white;
width: 60%;
margin: auto;
}
#header p
{
display: inline;
}
margin: auto will not work on a fixed (or absolute) position div. Instead you need to set left: 50% and the left margin to negative half of the element width.
#header
{
position: fixed;
width: 60%;
left: 50%;
margin-left: -30%;
}
http://jsfiddle.net/ZAqJM/
UPDATE: as of now most browsers will support transfrom: translate so you can comfortably do:
{
position: fixed;
left: 50%;
transform: translateX(-50%);
}
I know this is quite old but I think is worth mentioning that the following works like magic:
#header {
left: 50%;
transform: translateX(-50%);
}
For future references.
Centering a <div> using margin: auto; works cross browsers. You need to make sure the div that you're trying to center is contained in a block-level element.
<div class="headerContainer">
<div id="header">
<p>John Doe</p>
<p>email</p>
</div>
</div>
To properly center, your div#header needs to be block-level and must have a width and is a child element of a block-level element. (Technically <body> is block-level but you might want to maintain your header's "containership")
Therefore, remove the position: fixed from #header { ... }. Please see working example: http://jsfiddle.net/amyamy86/2sXdC/
margin:auto is for the object that has width and set the left-right margin equally.
Div is basically BLOCK with FULL-WIDTH (100%) so set margin:auto is doesn't get anything since the width is full to the parent.
To make it work, you can did that by 2 ways,
use text-align:center for div -> this will align text inside div center
include width property in div (i.e. width:200px) and it will work fine.
Related
I have an div element with variable height which I need to be positioned by it's bottom relative to the containers top.
This must be done without changing the html.
e.g.
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
h1's bottom should be 100px below #container's top.
Thanks a lot
EDIT:
So by Request what I did (or didn't) tried:
Searching with Google for css bottom top position relative but that's not the best search terms in the world...
Normally I would put a container around h1 and give it a height of 100px but then I would need to change the html and that I can't
using bottom: somevalue but that positions the element's bottom relative to the container's bottom.
slain some vampires
You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.
#container {
width: 200px;
height: 200px;
background: tan;
overflow: hidden;
}
#container h1 {
transform: translateY(-100%);
margin-top: 100px;
background: papayawhip
}
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
Depending on browser support requirements:
#container {
position: relative;
}
#container h1 {
position: absolute;
bottom: calc(100% - 100px);
}
Example
Only way through it is to add a height to the h1 unless you want to go with calc which isn't supported yet by some browsers. Then set your top margin to be top: 100px - h1's height. Hope this works
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
#container {
width: 300px;
height: 300px;
background: #222;
overflow: hidden;
}
#container h1 {
background: #444;
position:relative;
height:80px;
top:20px;
}
http://jsfiddle.net/ms889w57/
#container
{
position: absolute;
height: 100px;
bottom:0px;
}
This code is not affecting html at all. I added css for id-container.
An absolute position element is positioned relative to the first parent element that has a position other than static. You can change it to fixed it you wants to.
Height of the container, help you to calculate spacing from bottom.
In my layout, I am trying to output php generated items.
Each item retrieved from the database has a title, an image and a description.
I am trying to generate a layout that would have a thumbnail header composed of the img as a background (with the css style border-radius: 50%) and the title as a banner centered in the middle and taking the whole width. But using top 50% on the absolutely positioned div.title centers via the top edge and the div.title's height is dependent on font size.
I am wondering if there is a way to perfectly center the title, while keeping the border-radius effect considering that the only actual known dimension is the div.item's width and all height data is ultimately determined by .thumbnail-wrapper img and .title's font-size
the html is
<div id="container">
<div class="item">
<div class="thumbnail-wrapper">
<img />
<div class="title">Title</div>
</div>
<div class="content">Content</div>
</div>
</div>
The CSS
#container {
width: 600px;
}
.item {
position: relative;
display: inline-block;
width: 50%;
}
.thumbnail-wrapper {
text-align: center;
position: relative;
}
.thumbnail-wrapper img {
border-radius: 50%;
}
.title {
width: 100%;
position: absolute;
top: 50%; /* this is the problem */
}
Thanks!
JSFiddle example
Try this CSS for centering an absolutely positioned element (i.e. add it to div.title):
/* centering css */
top: 50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
Updated your JSFiddle Demo
Reference
This question already has answers here:
Center a position:fixed element
(23 answers)
Closed 9 years ago.
I have an CSS issue specific to Google Chrome. I've done some research but nobody knows how to fix it without Javascript, which I do not want to use because my element will change in the future.
The code is below, if you use it you will see the that the child div goes to the right hand side of the page and if I add the same top an position values to the parents it moves in the opposite direction.
The website will have a lot more content, and I want a centered header where the sidebar and the floated content will disappear behind as you scroll through the page.
<body>
<!--this should not need any css coding till later on after the site is complete-->
<center>
<div class="header_p1">
<img class="header_p1_child" src="header.png"/>
</div>
</center>
and the css is
.header_p1
{
background: white;
width: 750px;
height: 110px;
margin-bottom: 10px;
}
.header_p1_child
{
float: none;
background: white;
width: 750px;
height: 110px;
position: fixed;
top: 0px;
}
You want a centered header fixed to the top of the page such that for longer pages, the content will scroll vertically beneath the header.
Here is the prototype HTML snippet:
<div class="wrapper">
<div class="header">
<img class="banner" src="http://placehold.it/200x100" />
</div>
<div class="content">
<p>Lorem ipsum dolor ...</p>
</div>
</div>
I created a div.wrapper block to define a context for the layout, which has some padding equal to the expected height of the header.
The div.header block contains an image (200x100 px), and div.content holds various text paragraphs.
The layout and styling is defined in the following CSS:
.wrapper {
outline: 2px dotted blue; /** optional **/
/** Top padding so that initially, the content is below the header **/
padding-top: 100px;
}
.header {
height: 100px;
width: 400px; /** Use 100% to fill the width of the page **/
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(0,0,255,0.2);
}
img.banner {
display: block;
margin: 0 auto;
}
The .header style declares a height and width, and uses position: fixed to pin the position of the element to the view port. For positioning, top: 0 places the header to the top of the page.
To center the element, set left: 0 and right: 0 and use margin: 0 auto.
Within div.header, you can declare the image to be a block type element and then center it by using margin: 0 auto.
I checked this both in Firefox and Chrome and it works as expected. This relies on CSS 2.1 so it should work in quite a few older browsers, perhaps IE7, but I did not test it, but perhaps someone can do so and comment accordingly.
Fiddle: http://jsfiddle.net/audetwebdesign/q2WRv/
Source: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
DO NOT USE <center> tag, this is outdated and should be done with CSS
<body>
<div class="header_p1"><img src="header.png"/></div></center>
CSS
.header_p1
{
background: white;
width: 750px;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
left: 50%; /* Start at 50% of browser window */
margin-left: -325px; /* Go half of width to the left, centering the element */
}
Orignally taken from here In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
I've been googling this all morning and can't seem to get it to work:
I have a parent DIV with Relative positioning and a two column child DIV setup inside of it, both positioned Absolute.
I need the parent DIV's height to stretch with the content of the inner DIV's.
I have tried putting a .clearfix type bit before the closing tags for #content but I'm not floating anything. I've also tried adding a float attribute to the #content div to no avail. Can anyone point me to the right direction here. Clearly I'm missing something with how the nested displays affect each other.
CSS:
#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}
#leftcol {
width: 500px;
position: absolute;
}
#rightcol {
width: 270px;
position: absolute;
left: 500px;
margin-left: 10px;
text-align: center;
}
HTML:
<div id="content">
<div id="leftcol">
<p>Lorem Ipsum</p>
</div><!-- /leftcol -->
<div id="rightcol">
<img src="images/thumb1.jpg">
<img src="images/thumb2.jpg">
</div><!-- /rightcol -->
<br style="clear:both;">
</div><!-- /content -->
Dark side of the force is a pathway to many abilities some consider to be unnatural.
$(document).ready(function()
{
var objHeight = 0;
$.each($('#content').children(), function(){
objHeight += $(this).height();
});
$('#content').height(objHeight);
});
clearing works but ive had weird results. then i found a post that makes it much easier and perfect in all browsers.
Set your child divs to float:left/right. Then put "overflow:hidden" on the parent. Because you haven't specified a height, it will just wrap to teh child elements perfectly. I haven't use'd clearing for ages now.
Your column divs won't effect their containing div while they have absolute positions as they're removed from the normal page flow.
Instead, try floating them then have a div with clear: both; after them.
I have just been struggling with that for a while and found a real solution CSS-only is to change positioning of 'absolute' divs to 'relative'. This really works!!!
Tested on a Mac, using Safari 5.1.5 and Chrome 21.0....
Hope this will help someone else.
You do not need position: absolute for this task.
#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}
#leftcol {
width: 500px;
float: left;
}
#rightcol {
width: 270px;
position: relative;
margin-left: 510px;
text-align: center;
}
I want to place a <div> in the middle of an element. Aligning it horizontally is easy, and of course the vertical alignment can be done with JS, but I'm sure that there's a better way of doing this with CSS. What's the trick?
P.S. I need this for an application with the HTML5 <canvas> element, so I don't mind if the solution only works in browsers that support canvas and in IE 7,8 (which support canvas when using a plugin).
edit: the height (and width) of the div are resizable in browsers that support the CSS3 property resize. However, I don't mind about it too much.
another edit: I also don't know the height of the div (even if it hasn't been resized).
edit: see live demo
here
this example uses JS. (Loktar - thanks for the link).
Thanks();
Live Demo
One way to align vertically is to set the line-height to the height of the container.
#parent{
width: 200px;
height: 300px;
line-height: 300px;
text-align:center;
}
If the element you want to align has a fixed size, give it absolute position and make its top and left 50%. Then subtract half its height for its margin-top and half its width for margin-left. e.g.
html:
<div id="container">
<div id="alignedcontainer">content</div>
</div>
css:
#container {
position: relative;
}
#alignedcontainer {
position: absolute;
width: 500px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
}
You can also use display:table, display:table-cell, and vertical-align:center like here to center. It will adjust to fit content, but unfortunately the width will remain 100% of the container. You can see it used here
This works in Chrome
<html>
<head>
<style>
#outer
{
position: relative;
border: 1px solid #000;
width: 400px;
height: 400px;
margin: 20px;
padding: 20px;
}
#inner
{
position:absolute;
top:25%;
right:25%;
bottom:25%;
left:25%;
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
If the element does not need to wrap, a quick and dirty way is to set the line height equal to the div height (assuming it's a static height).