This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 8 years ago.
Here is a fiddle with it centered, but the image with position:relative instead of position:absolute.
Here is another fiddle with it positioned absolutely, but not centered.
Note that the image has a variable width.
The reason the image must be centered is because I want to fade one out while another is fading in behind it.
Any ideas? Thanks!
A better solution would be to not use the CSS position property at all.
Try displaying the images as block elements, and tell the browser to use an auto margin on left and right.
#imagesContainer img{
display:block;
margin:0 auto;
}
Proof of concept fiddle (border added just so you can see that the image is in fact centered):
http://jsfiddle.net/9nkDS/5/
Related
I am trying to create a menu using CSS, but I have a problem with its actual placement.
Right now, no matter what I tried it is always on the left side of the screen and not stretched. I would like to have it in the center and possibly stretch to 100% of the screen. I tried changing the width parameter, margins, text-align, but I always got something different than I wanted or it didnt work at all.
The menu can be seen here:
http://jsfiddle.net/98tW6/10/
As I said, all I want is to have it in the center top of the page and possibly stretched so that the background image repeats all over the screen at the top with the buttons in the center.
I think the crucial lines are within this part of the code:
div#menu
but I am not sure
Remove float and add this to the <ul>:
width:100%;
text-align:center;
Then remove the float from the <li> items and make them inline-block elements, because they are inline-block now they will respond to the text-align:center of the parent, and will be centered:
display: inline-block;
fiddle:
http://jsfiddle.net/98tW6/17/
How do I vertical align floating elements?
I currently have 3 elements (an image floated left, another image floated right and a div with a margin:0 centered) in a wrapping div. These are currently aligned at the top but I want them to aling at the bottom of the div.
How can this be achieved without using position absolute on them as this is a responsive layout? I have tried making them display:inline-block and vertical-align: bottom but that does not help anything.
In order to use vertical-align on some element, that element must have display:table-cell; css style. http://jsfiddle.net/StPYR/
Your jsfiddle updated: http://jsfiddle.net/chCjT/16/
Instead of floating the elements you need to give them display:inline-block; css property
Basically, I want to center text, ignoring any floating sibling elements.
At first, I thought this wouldn't be a problem, as I was under the impression that a floating element did not take from the width of any sibling elements.
Example (I want the red text to be at the center of the blue box, despite the green text)
How is this best achieved?
You can't. If it were centered within the parent box, then the float would overlap the content at some point, which would be defeating the point of the float. There are two approaches you can use here. If you know the width of the float, you can apply an equal negative right margin. Otherwise, you can absolutely position the element like this.
Here's a link to a working fiddle: http://jsfiddle.net/cD657/3/
(in your example, you opened a <span>, and closed it with </div>)
I made it a div and gave it margin: 0px auto; and a width. -seemed to do the trick
You can keep as you have it but just adding padding on the opposite side with the same pixel value as the width of the floating element.
.parent{
text-align: center;
}
.centered.element{
padding-left: [width of floating element]px;
}
.floating.element{
float: left;
}
To find the width easily just use Developer Tools in any modern browser to Inspect the element.
See fiddle here: http://jsfiddle.net/cD657/369/
Note: This may not work if the centered element has an assigned background color.
I can't work this out :-(
everything else moves but that main picture and 3 buttons to the right
http://www.e-fluential.com/offline/
Lee,
Take a look at the CSS for the other parts that are working. You have them defined with a width and the Margin:auto which is making them center.
To correct your header, you should provide a wrapper for the header components, and make sure you define the width, position:relative since you are using absolute position for the slideshow, and set the margin to '0 auto' which will create no top or bottom margin, but center to container.
CSS Example:
#header-wrap{
width:1000px;
margin:0 auto;
position:relative;
height:363px;
}
Hope this helps,
Chad
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 8 years ago.
What ways of vertical text centering inside a div contaner do you know?
text-align:center;
margin:0 auto; //tag needs to have a with
If a single line of text, setting the line height of the div to be the height of the div.
If the height of the content is known, position it absolutely - top: 50%, margin-top: -(half the height of the content) pixels.