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.
Related
This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 8 years ago.
I have a web page of the following layout.
The sidebar on the left is of the following css:
.sidebar {
display: inline-block;
top: 0;
width: 200px;
height: 1000px;
}
and the content on the right of css:
.content { position: relative; display: inline-block; }
But on adding any content inside the sidebar, the layout becomes:
The sidebar goes downwards and can't even make it go up by changing the 'top' value.
How can i Align a sidebar successfully in the left side of the content?
You should use vertical-align: top; declaration instead for both inline block columns to keep them at the top, as follows:
.sidebar, .content {
vertical-align: top;
}
'vertical-align'
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
CSS top property is only applicable to none-static positioned elements. It doesn't have any effect on inline-blocks or any other inline level elements.
Try adding vertical-align: top;
try to use the fixed property:
posistion: fixed
Try to check the width of oyu content, if it properly fits into this 200px width.
If you have firebug on your browser should give a good hand on debuging it.
You need to use some sort of position rule or your top value has no effect. I would use position: absolute; . Using fixed is not ideal.
I need to create a div of fixed height and 100% width. The contents of the div are a series of images (just img tags).
When I resize the window smaller than the overall width of the images, the last image in the list shifts/flows down and to the left, underneath the first image.
How do I keep the images from shifting/flowing to the next line and keep them all on one line so that the user is forced to scroll the div horizontally to see the rest of the images?
Here is a jsfiddle as an example: http://jsfiddle.net/ZnWXj/2/
You'll want to use the white-space CSS property to the div and give it a nowrap value.
Show in this jsFiddle. (Your original, plus I added the overflow-y property.)
CSS used:
div {
height: 120px;
background: #666;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
I think you are trying to Float all the images in the left.
In css use Postion Absolute for all images and then Float all the images to the left.
Something like
float:left;
position: absolute;
use these on the img tag
this is off the top of my head has not tried it yet. So sorry if I am wrong.
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;
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 have a problem aligning DIV's vertically, when the contents within them have different height (although the DIV's themselves have a fixed size).
See HTML example here (with inline CSS)
I want the DIV's to "flow" like text, so I'd like to avoid using position:absolute if possible. I'm using display: inline-block to the DIV's won't collapse.
Add a vertical-align property - it doesn't matter which one, they all do the same thing, since they're the same size. If they're different sizes, use vertical-align: middle:
.collection_box {
vertical-align: middle; /* or top, or bottom, if they're the same size */
}
Float them to the left:
.collection_box {
float: left;
}