i am starting to learn css. I have this html and css. I am not able to center this image to center of the window. Please explain also how you got this output.
Edited :
I want it to be center both vertically and horizonally
Thank you.
.myClass {
background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
height:250px;
width:250px;
}
<div class="myClass">
</div>
Here are solutions for centering div!
StackOverflow Answer
This is my preferred solution.
HTML:
<div class="container"><div class="container__inner"></div></div>
CSS:
.container{
position:relative;
}
.container__inner{
width: 250px;
height: 250px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Note that this solution only works if the container has a fixed height!
Read more about this here
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
You need to add margin to your class.
.myClass {
background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free- 1.gif);
height:250px;
width:250px;
margin:0 auto;
}
This will add margin on each side of the element.
add margin: auto
.myClass {
background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
height:250px;
width:250px;
margin: auto;
}
Related
Hoping there's a simple solution to this. Basically what I'm trying to do is place a div (#hello) in the vertical center of the browser and use fixed positioning so it doesn't budge on scroll. Here's my HTML so far:
<section id="home">
<div id="home-container">
<div id="hello"></div>
</div>
</section>
And the CSS:
#home {
display: table;
overflow: hidden;
margin: 0px auto;
}
*:first-child+html #home {
position: relative;
}
* html #home {
position: relative;
}
#home-container {
display: table-cell;
vertical-align: middle;
}
*:first-child+html #home-container {
position: absolute;
top: 50%;
}
* html #home-container {
position: absolute;top:50%;
}
*:first-child+html #hello {
position: relative;
top: -50%;
}
* html #hello {
position: relative;
top: -50%;
}
#home {
height: 100%;
}
Right now the div is vertically centered within the "home" section but moves on scroll. I've tried changing the #home and #home-container to fixed positioning but it doesn't work.
I've searched around quite a bit and apologize if a similar thread already exists. Hope someone can point me in the right direction. Thanks in advance!
The concept for vertically aligning a div to the vertical center with a fixed position would be to add the position:fixed property (specifying the offsets), and then placing a negative margin top of half the div height. Let's say that #hello is 100px tall for example:
#hello {
position:fixed;
top:50%;
margin-top:-50px;
}
With position:fixed; the div will be relative to your document window.
You can add this style. Also you have to add some content in the middle so that you can check properly, or, give some height(in px) to the parent div. An empty parent div with no height will not reflect the change.
#hello{
position: fixed;
top: 50%;
}
You can check this fiddle:
http://jsfiddle.net/76a4j/6/
Replace your css with this one
*{margin:0; padding:0;}
html, body{height:100%;}
#home{display:table; margin:auto; height:100%; width:100%; position:fixed; top:0px; left:0px;}
#home-container{display:table-cell; vertical-align:middle; text-align:center;}
#hello{display:inline-block;}
I made a fiddle for you. Check it out http://jsfiddle.net/fQwFL/
Hope it will fix your problem.
So, I just discovered this today and I couldn't find it this solution anywhere on Stackoverflow, so I thought I'd share it. Let me know if it's been posted somewhere else and I'll mark it as duplicate.
As far as I know centering an element wider than it's parent is a fairly common problem, the only solutions I've come across make use of Javascript, which turns out as a lengthy, messy bit of code that's annoying to maintain across lots of elements using this functionality.
The problem HTML:
<div class="container-fluid" >
<div class="center-me-fixed">
<span> Center </span>
</div>
</div>
CSS:
.container-fluid {
max-width: 400px;
width: 100%;
height: 100%;
display:block;
margin:auto;
}
.center-me-fixed {
width: 500px;
height:50px;
text-align: center;
}
The solution:
Use absolute positioning on the child you need to center, mess with the left/right values and set margin to auto like so:
CSS:
.center-me-fixed {
position:absolute;
left: -1000%;
right: -1000%;
margin: auto;
display: block;
width: 500px;
height: 50px;
}
Make sure the parent's container position is relative:
.container-fluid {
position: relative;
width: 100%;
height: 100%;
display:block;
margin:auto;
}
And that's it! I'm not sure how this works, if someone could explain that would be cool.
jsFiddle
I searched on the web and the best solutions i've found is this
Fiddle
css:
html, body {
height: 100%;
}
div.container-fluid {
border:1px solid blue;
max-width:400px;
margin:0px auto;
min-height: 100%;
}
div.container-fluid .center-me-fixed {
position:relative;
right:50%;
text-align:center;
}
div.container-fluid .center-me-fixed span {
border:1px solid green;
width: 500px;
height:50px;
display:inline-block;
margin-right:-100%;
}
html:
<div class="container-fluid">
<div class="center-me-fixed">
<span>
this should be centered
</span>
</div>
</div>
If this solution does not suit your needs, i apologize for making you lose time.
I wondered if someone could help me with this. Basically, I'm trying to center a text block vertically that sits within a square. The square is reponsive and therefore doesn't have a fixed width and height.
My HTML looks like this:
<div class="related-products">
<div class="row">
<div class="large-15 medium-15 columns">
<h5>Related Products</h5>
<div class="row">
<div class="small-15 medium-4 large-4 columns">
<div class="product">
<img src="http://store.kitchenscookshop.co.uk/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/t/3/t317_mug_red_1pt.jpg">
<dl>
<dt>Product Name is Product Name</dt>
<dd><del>£29</del> £24</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
And my CSS like this:
.product {
position: relative;
text-align: center;
display: block;
}
.product dl {
background-color: rgba(161,161,161,0.6);
width: 100%;
height: 100%;
padding: 0 20%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
I've also set up a demo over here.
Any help with pointing me in the right direction is appreciated.
Thanks in advance!
Unfortunately, vertical-align only works on inline elements. It's confused many a web developer, because it seems like something that should be easy to do.
I'm basically using this solution: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Change .product dl's CSS to:
.product dl {
background-color: rgba(161,161,161,0.6);
width: 100%;
height: auto; /* Won't work without this */
padding: 0 20%;
overflow: auto;
margin: auto;
position: absolute;
top: 50%;
-webkit-transform:translateY(-50%);
/* You may need to add more vendor prefixes; you can use http://prefixmycss.com */
transform:translateY(-50%);
z-index:2;
}
To fix the grey color overlay, we can remove the background color from .product dl and add this code:
.product:after {
position:absolute;
display:block;
content:'';
background-color: rgba(161,161,161,0.6);
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
I added "display: table" to your ".product dl" and it seemed to work fine. Also, I think your "vertical-align: center" is meant to be "vertical-align: middle". Let me know how you did.
I re-worked it out a little. I saw you are using tables, not what I'd do, but its fine I guess. The principal is still the same. However, if you are pulling images from a database and you can't use my method, again, the css fundamentals I used can still be used by simply taking the img out of the background and fix it to the div
.product {
background: rgba(161, 161, 161, 0.6) url("http://store.kitchenscookshop.co.uk/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/t/3/t317_mug_red_1pt.jpg") center center no-repeat;
height:400px;
padding: 0 20%;
overflow: auto;
margin: auto;
}
FIDDLE
I have this css:
#manipulate
{
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
}
I have this html:
<div id="manipulate" align="center">
</div>
How do we position that div at the bottom center of the screen?!?
If you aren't comfortable with using negative margins, check this out.
HTML -
<div>
Your Text
</div>
CSS -
div {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
Especially useful when you don't know the width of the div.
align="center" has no effect.
Since you have position:absolute, I would recommend positioning it 50% from the left and then subtracting half of its width from its left margin.
#manipulate {
position:absolute;
width:300px;
height:300px;
background:#063;
bottom:0px;
right:25%;
left:50%;
margin-left:-150px;
}
Use negative margins:
#manipulate
{
position:absolute;
width:300px;
height:300px;
margin-left:-150px;
background:#063;
bottom:0px;
left:50%;
}
The key here is the width, left and margin-left properties.
Here is a solution with two divs:
HTML:
<div id="footer">
<div id="center">
Text here
</div>
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
#center {
width: 500px;
margin: 0 auto;
}
Using a Flexbox worked for me:
#manipulate {
position: absolute;
width: 100%;
display: flex;
justify-content: center; // Centers the item
bottom: 10px; // Moves it up a little from the bottom
}
You can center it using negative margins BUT please note that it'll center exactly on the center of the screen IF any containing div is NOT SET to position:relative;
For example. http://jsfiddle.net/aWNCm/
So, best way to exactly center this div is to set correct properties position properties for its containing divs too otherwise it will be lost in some random ways.
100% working single line (Inline CSS Solve)
<div style="position: fixed; bottom: 10px; width: 100%; text-align: center;">Your Content Here</div>
100% working single line (Inline CSS Solve)
<div style="padding: 20px; width: 100%; text-align: center;">Your Content Here</div>
I want to be able to center a div in the middle of a page but can't get it to work. I tried float: center; in css but it doesn't seem to work.
There is no float: center; in css. Use margin: 0 auto; instead. So like this:
.mydivclass {
margin: 0 auto;
}
You can do it inline like this
<div style="margin:0px auto"></div>
or you can do it via class
<div class="x"><div>
in your css file or between <style></style> add this .x{margin:0px auto}
or you can simply use the center tag
<center>
<div></div>
</center>
or if you using absolute position, you can do
.x{
width: 140px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px; /*half the size of width*/
}
Try margin: 0 auto, the div will need a fixed with.
If for some reason you have position absolute on the div, do this:
<div class="something"></div>
.something {
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
if you are using width and height, you should try margin-right: 45%;... it is 100% working for me.. so i can take it to anywhere with percentage!
Give the DIV a specific with in percentage or pixels and center it using CSS margin property.
HTML
<div id="my-main-div"></div>
CSS
#my-main-div { margin: 0 auto; }
enjoy :)
Simple solution:
<style>
.center {
margin: auto;
}
</style>
<div class="center">
<p> somthing goes here </p>
</div>
Try Online