In my rails app I have a container that holds from 1 to 4 divs that contain product images/text. There is 1 div if someone only selected 1 product in the previous page, 2 divs if someone selected 2 products, 3 div's if someone selected 3 products and so one. So the amount of product div's will varies and change depending on circumstance.
What I want:
the container and its div's to be centered.
if there is one div, I want that to be centered/margin:auto,
if there are two div's I want them to float/inline-block and margin centered,
I want all div's to be float and be centered but until all the div's fill the width of the container.
I tried to margin:auto the container, but I need a set width. If I have a set width then it wont grow depending on how many div's are in the container.
image1 http://www.image-maps.com/uploaded_files/3201312101150184_div1.png
image2 http://www.image-maps.com/uploaded_files/3201312101150184_div2.png
image3 http://www.image-maps.com/uploaded_files/3201312101150184_div3.png
width of div's inside container do not change.
My question has nothing to do with the width of the browser.
You can use text-align on the container if your insider div are inline-block:
.container {
text-align:center;
}
.container div.inside {
display:inline-block;
}
You can set display to inline-block for the divs and text-align to center for the container.
Just remember that text-align is inherited, so you'll need to re-set it to the desired value on the divs.
The only way I know of doing this is to use
display: inline-block;
on the divs, and it's container. Do not use
float: left;
and set
text-align: center;
on the container and it's parent.
margin: auto; can only center a div if it has an explicit width. A div that auto-grows does not have an explicit width and so margin: auto; won't work.
White space
Be careful when using inline-block as the browser will see whitespace in your markup and render it to the page, which can cause unwanted effects. Just make sure to trim out all the white-space between your divs.
Related
So I basically have 2 containers which are the same width, but can have varying "heights" depending on their content. I wanted both to also have the same height regardless, adopting the height of whichever was tallest, so I used a flexbox which worked perfectly.
Now the thing is I'm wondering if it's possible to align content at the bottom of both of them.
I essentially have:
<div class="flex-box">
<div class="row event">MetTalks...</div>
<div class="row shop">Digital Shop...</div>
</div>
.flex-box {
display: flex;
width: 66%;
flex-direction: row;
justify-content: flex-start;
padding: 30px;
}
.row {
flex: 1;
}
As you can see here, they equally take up the row (I only wanted them to span the first 2/3) like I wanted to, and their heights are the same. But I want to be able to align the buttons at the bottom.
I've tried a bunch of things that aren't working, such as making a table div inside, but I can't get the height to stretch to 100% of the row divs
I also can't use position:absolute for the buttons because then they overlap the text as they're taken out of the height calculations.
I even tried making a vertically aligned flex container inside each one, but that also doesn't stretch to 100% height
You can achieve what you want with absolute positioning, without overlapping the text. You can set a fixed height to the buttons, let's say 50px. Then, you have to apply padding-bottom to the box equal to button's height, + top & bottom margin. So, if you want the button positioned 20px from bottom of the box, you can add a 90px (50 + 20 + 20) padding-bottom to the box. If you can submit the code to jsfiddle, it would be much easier to help.
I have two divs with fixed width placed next to each other in a parent div. I want to prevent the two divs to be placed under another if the parents' width becomes smaller than the childrens combinded width. They should stay next to each other, and overflow the parent.
See this fiddle
As you can see I want the two children to overlap with relative positioning. This leaves a lot of blank space in the parent that I want to eliminate.
Because I want the height of the parent to adapt to the tallest child (assume that the height changes and is not fix) I can not use float or position: absolute; which makes it tricky.
I am out of ideas. Any suggestions?
I would like the solution to include at least IE8.
If I understand the question correctly, just add the property "white-space: nowrap;" to the parent element.
See this fiddle: http://jsfiddle.net/qk0qrj54/2/
#parent {
background-color: yellow;
width: 380px;
white-space: nowrap;
}
Other than using display: inline-block and text-align:center, do we have anyway to make 2 div center inside a div wrapper? I don't want my text to be center.
Use text-align: center; on the wrapper div and text-align:left; on the child divs.
you can also use the margin: 0 auto; on the child divs instead of using text-aligns. But they will each have to have a width (px or %) and each div will be in its own row.
Using CSS margin is best way of centering a DIV. Add another DIV to hold the two centered ones with:
margin: 0 auto;
Make a 2nd wrapper for the two divs, with a specified width and set it's margin auto.
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 floated container with multiple child floated divs.
I want to center align (not text-align) all these floated child divs with respect to the floated container.
How do I do that ?
At a time, only 1 of these child div is visible on the browser ..User clicks on Prev/Next to view other child divs (kind of like Carousel)
Apparently I am facing issues center aligning if I use float:left for the child div.
You cannot align a floated element relative to a parent element.
The float CSS property rips an element from its context in the document (similarly to position:absolute/fixed). As a result of this, the element cannot be positioned "at the center of the parent".
I was searching for a solution today for my three divs inside a parent container and I came across this old post where a good solution doesn't seem to have been offered.
My situation: I have a parent container with width:100% so that it fits the screen. I also set a max-width so that the parent container doesn't grow too large. At the max-width I want the three child divs to display all in one row.
As the page is reduced and the parent container shrinks in width, I want the three child divs to reflow, each child div being pushed under the previous child div until they are all stacked vertically. As this happens I want the child divs to stay center aligned within the parent container.
The solution is to not use float which "rips an element from its context" as Rob W truly states, but instead use inline-blocks:
.parentContainer{
margin:0 auto; /*keep centered in page*/
width:100%; /*stretch to page*/
max-width:800px; /*expand up to 800px*/
text-align:center; /*keep my children centered*/
}
.childDiv{
display:inline-block /*treat me as a block that flows like text*/
width:230px; /*set my size*/
vertical-align:top; /*keep me aligned at the top of my parent even if my siblings are taller than me*/
}
<div class='parentContainer'>
<div class='childDiv'>Content 1</div>
<div class='childDiv'>Content 2</div>
<div class='childDiv'>Content 3</div>
</div>
You can float the parent container, give it absolute positioning, pretty much whatever, and the child divs will keep their same behavior.
cheers
If you show only one child div at once, probably they don't need to float. The best way to center a non-floated block inside of another block is to assign the following style:
.child {
margin: 0 auto;
}
This will center the div.child because both left and right margins will span equally to fit the parent container. Similarly, you can align divs to the left and to the right:
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
If you have a fixed width for both container and children, then you can use margin-left and margin-right set to (container div width - contained width width)/2. Of course, if you have paddings and borders, you have to account for them in the formula.