I want a div containing three images and I'd like the images stacked vertically.
I've set the div width to the width of my images and that doesn nothing. Here's my code:
.detailImgWrapper
{
display: inline;
position: relative;
width: 25px;
top:-210px;
}
.detailImgWrapper img
{
visibility: hidden;
padding: 0;
padding-top: 10px;
display: inline;
width: 25px;
height: 25px;
}
Thanks for taking a look.
set your images to display: block, and they should stack vertically.
A combination of parent with display:inline and child as display:block is a technique I use to arrange elements horizontally with dimension. Display:block is necessary to give dimension (i your case padding).
The code you have written appears to be working towards lining-up the images horizontally rather than stacking them vertically. So, I wonder what function the display:inline is serving in the parent?
Related
I have a question around vertically centering images which I haven't been able to find a solution to and would love to tap some other folks' brains. I am working on this page: http://www.heirloomtileworks.com/newsite/gift-tiles
The usual solutions haven't been working so far (at least not the way I've implemented them). My images are not contained within a div on a per-row basis; rather the rows of images are created by clearing floats every 4n+1 child elements.
The images may be a variety of heights, and the div is also not of fixed height. Images are added via the content manager. Each image is contained within div styled in this way:
#gift-tile-small-container {
width: 120px;
position: relative;
min-height: 100%;
overflow: hidden;
float: left;
margin-right: 30px;
text-align: center;
margin-bottom: 20px;
}
These divs containing images currently flow down the page within a div (#gift-tile-container). So each row is created not by a separate div, but like so:
div#gift-tile-container div:nth-child(4n+1) {
clear: both;
}
I would like each #gift-tile-small-container div to align with the others in its row, so that the vertical centerpoint of each div is aligned with that of it's rowmates.
If you need to see the HTML as well, let me know, although it is written in Textpattern native tags and not normal HTML. It should be fairly self-explanatory. I appreciate your help!
You can try this out. Use inline block for the containers. I reduced the right margin because between each div container, there is white space. I tried this in firebug and it seems to work
#gift-tile-small-container {
display: inline-block;
margin-bottom: 20px;
margin-right: 25px;
min-height: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 120px;
}
Again, as I mentioned in the comments, if you need to apply the same style to multiple elements. Use class instead of ID.
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
I've run in to this problem before, but i can't remember what the question was called and i can't find a relevant solution, so here we go again.
I need to float two boxes to the left. These boxes have a static width, the same width as the parent. What happens now is that the boxes stack beneath eachother instead of floating, because the parent isn't wide enough.
Here is a (rough) illustration of what i want:
http://i.imgur.com/oHqsH.jpg
Any ideas?
I updated your code using white-space: nowrap along with display: inline-block. If you really need to do it with float: left, do what #Kurt suggested since it should work. But I really believe inline-block is the right approach here.
Check the Fiddle or look at the code here:
.parent {
width: 200px;
white-space: nowrap;
overflow: hidden;
font-size: 0;
}
.child {
display: inline-block;
width: 200px;
font-size: 1rem;
}
As far as I know, the only way to do this "cleanly" is to have this structure:
.window
.parent
.child
.child
The parent's width is sum of all of its children, while window has the width of one child.
To get the white-space: nowrap method to work, you'll need a container in between your parent and child items with position: absolute;. The children items will need to have position: relative; and you will need to assign a height to the top parent.
http://jsfiddle.net/79LWk/3/
I have a Span tag containing a IMG tag and another Span tag.
I would like the inner Span tag to be aligned to the left and the IMG tag to be centrally aligned plus I want both the tags to be vertically aligned in the middle, and I can't seem to get this right...
This is how it looks (It's blue because the outer Span tag is marked in FireBug to show that it's stretching the entire surface):
As you can see in the image, both tags are centred and they are also aligned in the top of the container, I don't want either of this.
This is the markup:
This is the current CSS of the tags:
.v-button-wrap {
height: 100%;
display: block;
padding: 6px 15px 0 9px;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-icon {
margin-left: auto;
margin-right: auto;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-button-caption {
text-align: left;
line-height: normal;
vertical-align: middle;
}
I left out the CSS that isn't relevant for my problem, colors, font-specs and such. Needless to say I'm no ace at CSS. And I've looked up several guides covering the problem, but I've only managed to find examples where the entire content of a div is centered, and that's not what I want.
Does anyone with good CSS knowledge see the problem in my code? Or have another solution to solve my problem..?
Thanks!
EDIT: Here's a screen shot of the entire layout due to request. Sorry I have to blur some things... but they are in either case not important. =)
EDIT2: I did manage to solve my problem using the following CSS:
.v-button-details-panel-header .v-button-wrap {
height: 100%;
text-align: inherit;
padding: 0px;
}
.v-button-details-panel-header .v-button-wrap .v-button-caption {
display: table-cell;
position: relative;
text-align: left;
}
.v-button-details-panel-header .v-button-wrap .v-icon {
display: table-cell;
position: relative;
top: 12px;
margin-left: auto;
margin-right: auto;
}
I'm sure the advice dgvid proposed would have been good for a static layout. But since the panels and horizontally stretched buttons move depending on expansion and collapsing that wasn't a fitting solution.
You might need to set the CSS display property of both your img and span.v_button_caption to inline-block.
See also this article: Understanding vertical-align, or "How (Not) To Vertically Center Content"
As for another technique to achieve the desired result: If you know the height of the container element and you know the height of the element to be centered (and unfortunately from the CSS you've posted, it does not appear that you do), then you could
Give the container element CSS property `position: relative'
Give the element-to-be-centered CSS property position: absolute
Set the CSS top property of the element-to-be-centered to (containerHeight / 2) - (centeredEltHeight / 2).
How to horizontally center a floating element of a variable width?
Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.
Assuming the element which is floated and will be centered is a div with an id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that.
.center {
display: table;
margin: auto;
}
You can use fit-content value for width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
Say you have a DIV you want centred horizontally:
<div id="foo">Lorem ipsum</div>
In the CSS you'd style it with this:
#foo
{
margin:0 auto;
width:30%;
}
Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.
Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.
But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.
The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
Proof that it is working!
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
Can't you just use display: inline block and align to center?
Example.
for 50% element
width: 50%;
display: block;
float: right;
margin-right: 25%;