I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css
div
{
position: relative;
top: 0px;
left: 0px;
}
div img
{
margin-top: -10px; /*img width is 20px*/
position: absolute;
top: 50%;
}
This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.
PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.
For the image you say top: 50%. 50% of what? It should be 50% of the parent element. What is the parent element set to? If it's not set to anything, therein lies the problem.
why not do something like this
div
{
position: relative;
top: 0;
left: 0;
}
div img
{
position: relative;
top:25%;
left:50%;
}
The relative for the image means 25% from the top of the div and 50% for the left side.
Try putting it as a background image if you just want the image there.
div
{
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
margin: 0px auto;
position: relative;
width: Xpx;
height: Xpx;
top: 0px;
left: 0px;
vertical-align: middle;
}
and for the text use a div inside and position it using margin, padding or whatever.
How about auto margins:
div img
{
margin-top: -10px; /*img with is 20px*/
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
This works for me in firefox 7
This is a good article on the subject from CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Test this:
div {
position: relative;
top: 0px;
left: 0px;
background: red;
width:500px;
}
div img {
margin-top: -10px;
//position: absolute; /*get it out*/
display: block; /*Important*/
margin: auto; /*Important*/
top: 50%;
}
Related
An element is arbitrarily placed on a page, and needs to transition to a fixed position on event (screen scroll in my case, but im using hover in the fiddle)
The original position of the element is centered withing a parent (top: auto and left: auto). On hover, it's supposed to smoothly move to the corner of the screen (left: 0, top: 0) and then comeback. Instead, it just jumps in place, ignoring the transition property.
I realize that none of the browsers support transition to auto, but was hoping to find some work around for this.
fiddle
<div>
<span>test</span>
</div>
div {
border: 1px solid red;
text-align: center;
height: 100px;
margin: 15px;
}
span {
display: inline-block;
width: 50px;
height: 50px;
background: blue;
transition: all 1s;
position: fixed;
left: auto;
top: auto;
}
div:hover span {
left: 0;
top: 0;
}
PS. I'm hoping for a css only fix, but a solution with JQuery would work as well.
You are correct in that modern browsers are unable to transition to 'auto'. You can use CSS to achieve what you're looking for though.
In your example, you'll need to center by changing
top: auto;
left: auto;
to
vertical-align: top;
left: calc(50% - 25px);
Remove the top property from the span and span:hover and replace it with vertical-align.
JSFiddle Example
Why don't you set a specific top and left? you have span{position: fixed} so in this case you always know about your top, right, bottom, left (relative to viewport).
so try with:
div {
border: 1px solid red;
text-align: center;
height: 100px;
margin: 15px;
}
span {
display: inline-block;
width: 50px;
height: 50px;
background: blue;
transition: all 1s;
position: fixed;
left: 50%;
margin-left: -25px; /*or transform: translateX(-50%) if you don't know the width of span*/
top: 16px;
}
div:hover span {
left: 0;
top: 0;
margin-left: 0; /*or transform: none if you don't know the width of span*/
}
<div>
<span>test</span>
</div>
You can change the top left as you which to achieve what you want.
Here a jsfiddle example to play with
Usually this code works, but for some reason it's not vertically centering within it's parent element. Could this be because of the background image?
http://jsfiddle.net/tmyie/BcmNw/
<div class="background-image">
<div class="omg-title">This is the title</div>
</div>
CSS:
.background-image {
background-image: url('');
height: 600px;
background-size: contain;
position: relative;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
text-align: center;
}
.omg-title {
padding: 15px;
-webkit-transform: translate(-50%, -50%);
position: absolute;
}
Since you are using position: absolute you can remove transform and set the text to center with the following changes:
.omg-title {
top: 50%;
left: 50%;
position: absolute;
}
To perfect center horizontally you should know the width of the text, for example if it's 100px you should apply margin-left: -50px;
An example of the second solution http://jsfiddle.net/7ScDh/
If you just take away all of .omg-title's styling, it centers fine because .background-image has text-align:center;.
JSFiddle for proof
Remove the position and transform property and it will work for you:
.omg-title {
padding: 15px;
}
Try either of these, or remove absolute positioning:
1) center .omg-title div
.omg-title {
left: 50%;
position: absolute;
margin-left: -50px; // depending on width
}
2) give .omg-title div full width:
.omg-title {
width: 100%;
}
EDIT: For vertical allignment, try (demo here: http://jsfiddle.net/6E5as/):
.omg-title {
top: 50%;
position: absolute;
margin-top: -10px; // depending on height
text-align: center;
width: 100%;
}
I am using image gallery in which outer width is 100%. But image is going align left because gallery image position is absolute. I m trying to make aligned center plz help me.
outer div css code:
.wt-rotator .screen {
height: 500px !important;
left: -5px;
position: relative;
top: -11px;
width: 100% !important;
}
style on image css:
.wt-rotator .main-img {
border: 0 none;
display: none;
left: 0;
padding: 0 !important;
position: absolute;
top: 0;
z-index: 0;
}
Thanks.
Try adding css properties {left: 50%; right: 50%;}
I'm trying to place some large text in the dead center of the page. I only want (prefer) a body tag in the page and nothing else. I've tried using display: table-cell and setting the vertical-alignment to middle but that did not work with a height: 100%
I then found another question on stackoverflow which addressed this problem but I realized it does not work with bigger font. This is what I have so far: http://jsfiddle.net/aECYS/
Push the div to top and left based on the width and height specified.
CSS
body{ background-color: #000;}
div{
background-color: #000;
width:800px;
height: 200px; line-height: 200px;
position: absolute;
top: 50%; margin-top:-100px;
left: 50%; margin-left:-400px;
font-weight: bold;
font-size: 100px;
text-transform: uppercase;
color: #ccc; text-align:center
}
DEMO
If your position is absolute then you move your text anywhere you want change your css attribute with this.
Note: Absolutely positioned elements can overlap other elements.
position: absolute;
top: 37%;
left: 34%;
See Demo
Set width and height as 100%
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
Then the text center with the different screen size
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
is the best way, choose your class though here.
I am trying to achieve a dashed (custom) bored along the left and right of a 1000px fixed width page.
The left one is fine, this works a treat:
#border-left{
position: absolute;
float:left;
top: 0px;
bottom: 0;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}
However when I do it over on the right hand side, it wont quite work. I need it to relatively position to the right of the 1000px rather than of the window.
#border-right{
position: relative;
right: 0;
top: 0;
bottom: 0;
margin-top: -90px;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}
Parent element:
#container{
width:1000px;
display: block;
margin:0px auto;
text-align:left;
padding-top:90px;
}
That does not work. Can I achieve this? I need it to essentially float: right (but then i cannot make the height 100% of the browser window). Thanks
Demo: http://jsfiddle.net/iambriansreed/sAhmc/
Removed the floats on absolute elements. Added absolute position to parent and centered using left and margin. Removed unneeded margin-top on right border. Replaced border id's with classes.
Borders sit outside the 1000px width.
#container>.border{
position: absolute;
top: 0;
bottom: 0;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}
#container>.border.left{
left: -5px;
background-color: red; /* demo */
}
#container>.border.right{
right: -5px;
background-color: blue; /* demo */
}
#container{
position: absolute;
top: 0;
bottom: 0;
width: 100px; /* demo */
left: 50%;
margin-left: -50px; /* half of width */
text-align: left;
padding-top: 90px;
overflow: visible;
background: #eee; /* demo */
}
I think adding a "position: relative;" rule to the #container element should work for you.