For some reason I am stumped over such a simple thing.
How can I center align a fixed position object with a bottom border that will vary in width?
The problem I have now is that it works only with a 100% width object.
I could do this easily with a fixed width div, or with javascript, but is there a css-only solution to this?
http://jsbin.com/uvaron/2
Use display: inline-block; on #title p.
demo
This can be done with just CSS. If you set your fixed element to have a left: 50% and margin-left: -[half the width of your element] it will center even on resize.
Here's a Fiddle
Related
Hi so I was making a website and I just realized that it when I want to position the html element, it will position the element using the right side of it. Here's an example of what I mean. I was trying to position an image in the center using percentages. Trimmed down version of my css code: .image{position:absolute;right:50%;
So when I loaded the website, it shows up with the right corner of the picture at 50%, not the center of the image at 50%. Is there anyway to position using center of the image to position the picture at 50%, and not the left or right edge of the picture being at 50%? I don't want something like position:absolue;right:45% to move the picture over, but instead use the center of the picture to position the picture. If you need any more clarification just let me know.
Set a width for the image and then set the left and right margins to auto.
` {width: whatever you want; margin-left: auto; margin-right: auto; } `
You can do it easily using text-align, when element you want to position is inside some container, i.e:
HTML:
<div class="container">
<div class="image">Center me!</div>
</div>
CSS:
.container { text-align: center }
.image { display: inline-block }
Second approach: if you know the width of the element (.image). Let's say that it is 400px wide:
CSS
.image {
position: absolute;
left: 50%;
margin-left: -200px;
}
A little bit tricky, can cause a problem when the width of the screen is lower than width of the element.
My situation is that I have fixed position div with percented height at the bottom of page that is on top of it(see picture). The issue is that when I scroll page to the end, some of its content is hidden beneath this div. I think I should add empty element at the bottom of page, but what is the best way to do it?
A nice solution could be to change the height of the fixed div to be expressed in vh not in % (see), for example:
div.fixed-at-bottom { height: 20vh; .... }
and then set a margin-bottom to your contents div with the same value (or a little more to get more space):
div.content { margin-bottom: 22vh; .... }
I created a jsfiddle to present that.
This is a cut down version of my code: http://jsfiddle.net/f6GCz/
I'm trying to vertically center the "learn more" box using this code:
position: absolute;
margin-left: auto;
margin-right: auto;
What would cause this box not to be centered vertically? Even when I apply a width to it it doesnt work. Cross browser solutions (IE8+) preferred!
If you have to use absolute positioning, add this to your "learn more" box css:
left:50%;
width:90px;
margin-left:-45px;
Where the margin-left is always 1/2 of the container width.
Update
If you don't have to use absolute, then give the div a width and set the margin to:
margin:0 auto;
If desired, the width can be a percentage instead of a px value.
Updated fiddle with both results.
Update Two
If you want to align your learn more box without specifying it as absolute, put it inside a footer container that is positioned at the bottom, then use margin:0 auto on it. Something like this: Fiddle 2
I'm trying to add caption of images on top of the image. These images should be floating in a grid-like system (without an fixed height!) like in the fiddle I made over here http://jsfiddle.net/thomasjonas/GzjuM/3/
You can already see te problem... Because of the absolute positioning of the title and image inside the relative item div, the relative item div doesn't get the appropriate height, but just the height of the border... How can I fix this? I have looked for answers everywhere, but most of the time the problems of others are solved using a different approach. The only other approach I know for my problem is using an image as a background for a div, but then I need to know the width and height of my image... What is the best solution for this problem?
Don't position the images absolute. Instead render the <div class="image"> elements as block (using display:block if you changed your div style somewhere) and set up a margin instead of fiddling with absolute positioning:
.item .image{
display:block;
margin-top: 1em;
margin-left: 1em;
}
JSFiddle
I am really struggling with this and I have no idea why. I want to have text and an image on 1 line and centered inside a 100% width div. Here's a jsfiddle..
http://jsfiddle.net/JnbeJ/
floated elements automatically become block-level. It's impossible to center them via text-align: center. The only way for you to do is to make them inline-block like so: display: inline-block. I added vertical-align: top; for the h to be at the top. The working example is here: http://jsfiddle.net/skip405/JnbeJ/4/
Your image and text can't float left and be centred at the same time...
You have a div that is 100% width (btw/ divs are 100% to begin with), and trying to center a div inside it that is also 100% width. You can either put a width on the inner div, or make it inline-block.
Updated fiddle.
You are using a wrapper with class name "centered" so instead of making both elements (display: inline-block;), just add this to style your wrapper:
.centered {display: inline-block; margin: 0 auto;}
You also have an additional (text-align: center;) in your containers css that does not need to be there.