I need to align image at the middle of the page. I used margin:auto to align middle horizontally.
How do I align the div block middle vertically. I have below conditions to follow.
I can not mentioned width and height of div or image.
I can not use margin-top in pixels.
Here is my jsfiddle.
You were doing it almost right. Here's your fixed fiddle http://jsfiddle.net/joplomacedo/cDD7m/4/
The thing is, you need an element with display: table wrapping one with display: table-cell for the table-cell to behave like it's supposed to.
Will background image technique fit your needs?
background: url(my-image.jpg) center center no-repeat;
Related
I'm trying to create a centered div with the content of that div (a few images) bottom aligned. Bottom aligning the content is already a tricky issue that I've resolved (using HTML image bottom alignment inside DIV container). However, the solution removed the centering of the div.
The way I was centering was using display: inline-block;
Original, before bottom aligning content:
http://jsfiddle.net/5NuBD/
The fix to bottom align was adding
display: table-cell;vertical-align: bottom;
New, with bottom aligned content, which is no longer centered:
http://jsfiddle.net/KurpZ/
I'm looking for a centered div that is also bottom aligned. It seems these two solutions are incompatible.
If the div can be a fixed width :
#wrapper {
text-align:center;
margin: 0 auto;
width: 230px;
}
I ended up setting the css to a fixed width, as suggested by Chris. I then used jquery to sum the widths of each image and manually set the .width() after the page loaded. This works.
I need to align 3 different elements in my div.
They are in a ul list:
Left, Center and Right.
I tried to use float: right for the right element, and margin: 0 auto with a width for the element in the center. But still it doesn't align automatically.
The elements can also be images, not only text.
http://jsfiddle.net/PwmrC/
display:table and table-cell may be your solution. Here is the fiddle demo.
Later edit: Reworked example
How do I horizontal center an element and keep fixed at the same time?
Is this possible? Another elements on page can use html or css.
example:
try margin: auto;. It centers horizontally but the element must have a width.
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.
I am creating a menu to my site in ul.buttons.
In it I have a title, span.button-title, a sub-title span and a code p.
This code must be aligned vertically to the center, half of the title and subtitle.
How to make the autura the tag p (in red) will have the same autura of div.button. I tried height: 100%; but failed.
After her stay with the same height, I would align the tag p in the center, vertical.
See the code.
Thanks.
I updated your jsFiddle with some changes.
First, inline-block elements don't consider the vertical size. So it's necessary changing to block and do the horizontal align with float.
Then, elements cannot use height: 100% if their parent has no fixed height. Then a height was set to the button class.