I have 2 divs below each other. I want them both to be centered horizontally. The thing is that I have to use align: center for the #wrapper and margin: auto for the other. Otherwise only 1 of them is centered. If I use align-center for both, only the #wrapper is centered, if I use margin: auto for both, only the second one is centered.
Why I have to use 2 different properties to align them in the center?:
HTML:
<div class="col-sm-5 col-sm-offset-3" id="wrapper">
<div class="row">
<div class="col-sm-1 col-sm-offset-2" id="col1"> col1 </div>
<div class="col-sm-1 col-sm-offset-2 " id="col2"> col2 </div>
<div class="col-sm-1 col-sm-offset-2" id="col3"> col3 </div>
</div>
</div>
<div id="below">
Centered div below the #wrapper div
</div>
CSS:
html, body{
height:100%;
}
#col1{
background-color: lime;
border: solid 1px;
text-align: center;
}
#col2{
background-color: aqua;
border: solid 1px;
text-align: center;
}
#col3{
background-color: lightpink;
border: solid 1px;
text-align: center;
}
#wrapper{
border: solid 1px;
height: 10%;
width: 50%;
align: center;
}
#below{
border: solid 2px;
text-align: center;
min-height: 100%;
width: 80%;
clear: both;
margin: auto;
}
align isn't a valid CSS property - it is an attribute available on the <table> element, but one that is discouraged from use: https://developer.mozilla.org/en/docs/Web/HTML/Element/table#Attributes
Using align in your CSS should have no effect.
margin: 0 auto; affects the container directly, and when the container is block-level (display: block).
text-align: center affects text, inline, and inline-block level children of a container - not the container itself.
It's important to distinguish between the two:
centering a block-level element: use margin: 0 auto;
centering text, inline, or inline-block level children: use text-align: center;
In light of that, check that #wrapper is block-level i.e. display: block. If it isn't, or it has a parent that inhibits its width, then it won't center with margin, unless you go into the display: flex world, which you shouldn't really explore until you grasp the fundamentals of block and inline-block level elements.
I've written an article explaining how to leverage the basic display properties, supplemented with interactive Codepen demos: http://fixate.it/blog/css-display-properties/
Div margin: auto vs align: center
margin: 0 auto When can you use it?
When will you need to set center align any div or any block like main parent container in this case you have to use margin: 0 auto with display: table it be will set your section center of parent section.
text-align: center When can you use it?
When will you need to set center align any Text Paragraph or Image in this case you have to use text-align: center it will be set your text-paragraph or image center of
Related
I want to make a very simple navbar with HTML and CSS (so simple I prefer to do it without Bootstrap), made of just three short texts, situated on the leftmost, center, and rightmost part of one single line.
My idea is that I cut the line in two halves, put the left & middle part in the first half, and the rightmost part in the second half. So I tried the following :
.div_left {
float: left;
position: absolute;
}
.div_right {
float: right;
text-align: right;
position: absolute;
}
.container_for_mininavbar {
width: 100%;
position: absolute;
}
.mininavbar_left_half {
width: 50%;
float: left;
position: absolute;
}
.mininavbar_right_half {
width: 50%;
float: right;
position: absolute;
}
<div class="container_for_mininavbar">
<div class="mininavbar_left_half">
<div class="div_left">Left Text</div>
<div class="div_right">Center Text</div>
</div>
<div class="mininavbar_right_half">
<div class="div_right">Right Text</div>
</div>
</div>
But that doesn't work, all the texts are on top of each other.
What is the correct way to do this?
Just remove position absolute.
I'll suggest to use flexbox to do this and don't use float anymore
.div_left {
float: left;
}
.div_right {
float: right;
text-align: right;
}
.container_for_mininavbar {
width: 100%;
}
.mininavbar_left_half {
width: 50%;
float: left;
}
.mininavbar_right_half {
width: 50%;
float: right;
}
<div class="container_for_mininavbar">
<div class="mininavbar_left_half">
<div class="div_left">Left Text</div>
<div class="div_right">Center Text</div>
</div>
<div class="mininavbar_right_half">
<div class="div_right">Right Text</div>
</div>
</div>
And this is a little example with flexbox
.container_for_mininavbar {
width: 100%;
border: 1px;
display: flex;
}
.container_for_mininavbar div {
flex: 0 1 33.33%;
border: 1px solid #000;
text-align: center;
}
<div class="container_for_mininavbar">
<div>Left Text</div>
<div>Center Text</div>
<div>Right Text</div>
</div>
So, you want some links to the left, some to the center and the rest to the right?
The easiest and most effective way (by me) is to use Flexbox.
So, you need a container div, named "navigation" (or however you want) which contains another 2 divs, one for the left side, and one for the right side.
Now, assign to the navigation div, the following:
display: flex; /* is going to display the div flex */
justify-content: space-between; /* this is where magic happens, it will push the items from the nav div, which are the other 2 divs to the left and right side*/
flex-flow: row nowrap;
The first property is for it to be displayed in a row, you can set it to column too, and the nowrap is not going to let the content to deform in some sort of way, if you set that to wrap, of course, it will wrap under, but I suggest letting that nowrap, but I don't think flex-flow is 100% neccesary in this situation
Now, the flexbox works for the other 2 divs as well, maybe you want the links in the left-side div to be "justify-content: space-between;" or space-evenly, or center, space-around, etc.
I recommend you to learn Flexbox, it's very useful and simple to use.
I hope this answer will help you. :)
And to center the links in each div, use align-items: center; , it will center the links on the Y scale. (which is top-bottom)
EDIT: If you want center links too, it's the same thing, just make another div between the left-side div and the right div. And the justify-content: space-betweeen; it's going to have the same effect. And if you don't link how it scales, you can always use the margins in the div.
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I'm trying to float two elements at the right of a "figure" element using flex but it end up floating just div1 at the right of figure and div2 is moved bellow, if I make div1 and div2 narrow enough, they are floated inline at the right of figure.
This is the CSS:
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
Desired Result:
Actual Result:
How it works?
First, you make a flex-container (flexc in this case) and apply the display:flex property on it which aligns the elements by default in row alignment. If you want an element to preserve its dimensions set it to flex:0 0 auto; else you can make use of flex:1; which shrinks or grows as the browser is resized.
Then to align the contents in column (div1 and div2) you can just wrap then in a different container and since div isn't an inline container, and the flex property doesn't have any effect on any other than the direct children of the flex parent, they are aligned in seperate lines.
.flexc {
display: flex;
justify-content: flex-start;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
<div class="flexc">
<div id="fig">Figure</div>
<div class="col">
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
</div>
Without altering the html:
.flexc {
display: flex;
flex-direction:column;
position:relative;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
position:absolute;
left:250px;
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d2{
top:70px;
}
<div class="flexc">
<div id="fig">Figure</div>
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
Not sure what your HTML looks like, but display: flex is best used on the container wrapping all the elements you want aligned. Imagine it to be the largest box that you put smaller boxes inside.
Codepen example demonstrating this: https://codepen.io/corviday/pen/VyYdar
Following this hierarchy with .container as your largest box, since you want two columns, you can divide it further into two smaller boxes (.left in red and .right in blue in this case).
From there you would need to group div1/div2 together to float the way you'd like, and would be the items that fill the box .right.
You can use Bootstrap to resolve or put div1 and div2 in one div main to drop div main
Bootstrap exemple
<div class='container'>
<div class="col-md-12">
<div class="col-md-6">
1 text
</div>
<div class="col-md-6">
<div class="col-md-6">
2 text
</div>
<div class="col-md-6">
3 text
</div>
</div>
</div>
</div>
I think the best layout engine to use for your use case is hinted at in your description of the problem: Floats.
Here is a solution that doesn't require you to alter your html.
<div class="container">
<div class="medium-box">figure</div>
<div class="small-box">div 1</div>
<div class="small-box">div 2</div>
</div>
.container{
width: 500px;
}
.medium-box {
height: 200px;
width: 200px;
margin: 10px;
background: grey;
float:left
}
.small-box {
float:left;
height: 30px;
width: 200px;
background: blue;
margin: 10px;
}
https://codepen.io/stacyvlasits/pen/aVPZbY
I am making a music playback controller, and the container has 3 sections: left, center, and right. However, since the left and right sides have different widths, the center section isn't in the true center of the div, but I need it to be. I am using flexbox's space-between option to layout the items.
#container {
display: flex;
justify-content: space-between;
background-color: lightgrey;
}
#container > div {
height: 100px;
border: 2px dashed red;
/*This is only for looks*/
text-align: center;
padding: 5px;
}
<div id="container">
<div>Left Side</div>
<div>I want this centered</div>
<div>Right Side (Extra text for extra length)</div>
</div>
You can use margins to approximate centering. But in order to get perfect centering with flexbox that's consistent across a variety of viewports, you'll have to slightly modify your HTML somewhat.
You need to turn the direct children of #container into flex containers themselves with a display:inline-flex declaration and give them a flex value of 1 and justify-content: center.
From there, you add your content into child divs. To get alignment on the left and right divs, use margin-right: auto and margin-left: auto, respectively.
#container {
display: flex;
background-color: lightgrey;
}
.flex {
flex: 1;
display: inline-flex;
justify-content: center;
}
.flex > div {
height: 100px;
border: 2px dashed red;
text-align: center;
padding: 5px;
}
.left div {
margin-right: auto;
}
.right div {
margin-left: auto;
}
<div id="container">
<div class="left flex">
<div>Left Side</div>
</div>
<div class="center flex">
<div>I want this centered</div>
</div>
<div class="right flex">
<div>Right Side (Extra text for extra length)</div>
</div>
</div>
This is fairly a simple question but I cant wrap my head around a simple solution. I need to center 3 squares in a row, but I dont know the total amount of squares (while the simple solution to this would be to use text-align: center), BUT I dont want to center the last elements. Long story short, how to create float: left effect + centering all elements inside the main container?
JSfiddle here.
HTML:
<div class="row b">
<div class="col-lg-6 col-md-6 col-sm-12 col-lg-offset-3 col-md-offset-3">
<div class="row maxW b">
<div class="postContainer"></div>
<div class="postContainer"></div>
<div class="postContainer"></div>
<div class="postContainer"></div>
</div>
</div>
</div>
CSS:
.postContainer {
width: 230px;
height: 230px;
border: 1px solid lightblue;
display: inline-block;
}
.maxW {
max-width: 900px;
}
.ce {
text-align: center;
}
.b{
border:1px solid black;
}
Expected result:
These squares should be responsive, max squares per row is 3. If I use float: left, I get almost what I need, but the squares are pulled to the left and not centered inside the main container. If I use text-align: center, the squares are centered in the main container, but I dont want the last squares to be centered, they must remain floated to the left.
I would recommend using flexbox. It's a pretty new concept in css, but it has good support in all modern browsers. I personally use it in production.
The markup would be simplified as:
<div class="posts">
<div class="postContainer"></div>
<div class="postContainer"></div>
<div class="postContainer"></div>
<div class="postContainer"></div>
</div>
And the container would have the CSS:
.posts {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin: 0 auto;
}
Display: flex tells the browser it's a flexbox, flex-flow says that it should be rows that wraps when full and that the content should be left-aligned by flex-start.
Fiddle
Flexbox basics
You can set the container width to 33% and then set the post border and width on a contained div.
.postContainer {
width: 33%;
display: inline-block;
text-align: center;
}
.post {
width: 230px;
height: 230px;
border: 1px solid lightblue;
display: inline-block;
}
https://jsfiddle.net/k9597cLq/
You can just use display:inline-block; instead of float.
You CSS would look something like this:
.maxW{
border:1px solid black;
padding:5px;
}
.postContainer{
width:150px;
height:150px;
border:1px solid black;
display:inline-block; /* <-- the magic part*/
}
DEMO
I have a container div with a fixed width and height, with overflow: hidden.
I want a horizontal row of float: left divs within this container. Divs which are floated left will naturally push onto the 'line' below after they read the right bound of their parent. This will happen even if the height of the parent should not allow this. This is how this looks:
How I would like it to look:
![Right][2] - removed image shack image that had been replaced by an advert
Note: the effect I want can be achieved by using inline elements & white-space: no-wrap (that is how I did it in the image shown). This, however, is no good to me (for reasons too lengthy to explain here), as the child divs need to be floated block level elements.
You may put an inner div in the container that is enough wide to hold all the floated divs.
#container {
background-color: red;
overflow: hidden;
width: 200px;
}
#inner {
overflow: hidden;
width: 2000px;
}
.child {
float: left;
background-color: blue;
width: 50px;
height: 50px;
}
<div id="container">
<div id="inner">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
style="overflow:hidden" for parent div and style="float: left" for all the child divs are important to make the divs align horizontally for old browsers like IE7 and below.
For modern browsers, you can use style="display: table-cell" for all the child divs and it would render horizontally properly.
You can now use css flexbox to align divs horizontally and vertically if you need to. general formula goes like this
parent-div {
display: flex;
flex-wrap: wrap;
/* for horizontal aligning of child divs */
justify-content: center;
/* for vertical aligning */
align-items: center;
}
child-div {
width: /* yoursize for each div */
;
}
This seems close to what you want:
#foo {
background: red;
max-height: 100px;
overflow-y: hidden;
}
.bar {
background: blue;
width: 100px;
height: 100px;
float: left;
margin: 1em;
}
<div id="foo">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
you can use the clip property:
#container {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: hidden;
background: red;
}
note the position: absolute and overflow: hidden needed in order to get clip to work.
Float: left, display: inline-block will both fail to align the elements horizontally if they exceed the width of the container.
It's important to note that the container should not wrap if the elements MUST display horizontally:
white-space: nowrap
Float them left. In Chrome, at least, you don't need to have a wrapper, id="container", in LucaM's example.