I have the following problem. I have a container which is responsive so it will be the width of the browser. Or when the browser is large enough there will be a sidebar displayed next to it.
Inside this div I have about 10 items with the following css:
display:block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
float:left;
So they form a grid.
At this point what happens is that when the container div is 440px width for example. They will diplay nicely 2 on each row. But when the width of the container is 600 for example. still 2 are diplayed with a large white area on the left.
Now I want to center them. So the 2 should be centered in the container. I tought I would do this by adding another container warpping the elements and giving it a margin:auto; But that doesnt work:
Fiddle: http://jsfiddle.net/kqvcnugs/
So how do I make sure the items are always in the middle?
Thank in advance!
Do you mean this?
http://jsfiddle.net/kqvcnugs/7/
In your case, just set to a display: inline-block; and parent div text-align: center;
But short description is:
.parent { text-align: center; }
.children { display: inline-block; }
Good luck!! :)
Like this: stackoverflow post
You can make use of CSS3 flexible box layout.
justify-content: center on the parent container will align it to
the center horizontally.
flex-wrap: wrap will make sure the
blocks wrap to next line instead of resizing.
body {
width: 100%;
background: blue;
}
div {
background: red;
overflow: hidden;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
a {
display: block;
width: 200px;
height: 200px;
background: tomato;
margin: 10px;
float: left;
}
<body>
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</body>
Instead of using float, you can use display:inline-block; and then give text-align:center; to the parent element.
body{
width: 100%;
background: blue;
}
div {
background: red;
overflow:hidden;
/* Add text-align:center; */
text-align: center;
}
a{
/* Change to display:inline-block; remove float */
display:inline-block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
}
<body>
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</body>
Jsfiddle
you can try this one:
body{
width: 100%;
background: blue;
}
div {
background: red;
overflow:hidden;
text-align: center;
}
a{
display:inline-block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
}
DEMO HERE
Related
Is it possible to align my text to the vertical middle. I've used valign, text-align and padding but will doesn't work. Also, I don't want any image to align with text.
Solution needs to be HTML only.
body {
background-color: #6B6B6B;
margin: 50px;
<div style="background:#2f2f2f;height:42px;width:250px;"><i><b style="padding-top:10px;text-align:middle">Text</a></div>
Just add to the div.
display: flex;
align-items: center;
body {
background-color: #6B6B6B;
margin: 50px;
<div style="background:#2f2f2f;height:42px;width:250px;display: flex;
align-items: center;"><i><b style="padding-top:10px;text-align:middle">Text</a></div>
Also, the html format is not valid, a better code would be something like this:
body {
background-color: #6B6B6B;
margin: 50px;
}
.container {
background: #2f2f2f;
height: 42px;
width: 250px;
display: flex;
align-items: center;
}
<div class="container">
<span>Text</span>
</div>
Your HTML has some syntax errors, and you need to use negative margins in this case to align to the bottom center.
body {
background-color: #6B6B6B;
}
.bottomcenter {
position:absolute;
width:300px;
height:300px;
bottom:0px;
right:25%;
left:50%;
margin-left:-150px;
color:white;
}
<div style="background:#2f2f2f;height:42px; text-align:center;" class="bottomcenter"><i><a style="padding-top:10px;">Text</a></i></div>
I think it's this one. If you want to make the text go to the center you just write this code:
text-align: center;
I'm trying to center align a div that is located within another div. I want to vertically center the "options" div that is located inside the "plan-container"
Thanks in advance.
.plan-container {
width: 960px;
height: auto;
margin-top: 62px;
overflow: hidden;
background-color: red;
}
.options {
float: left;
width: 151px;
height: 100px;
background-color: green;
}
.plan {
float: left;
width: 220px;
height: 600px;
margin-left: 23px;
background-color: purple;
}
.plan:last-child {
float: right;
}
.plan-featured{
width: 300px;
height: 600px;
background-color: purple;
}
<div class="plan-container">
<div class="options">Options</div>
<div class="plan">Box one</div>
<div class="plan plan-featured">Box two</div>
<div class="plan">Box three</div>
</div>
Vucko's answer is correct. I wanted to add a comment, but since I don't have enough reputation yet, I'll just post it as an answer.
You can use the vertical-align property on the inner div that needs centering. This property only works on elements that have display:inline-block or display:table. Refer to the actual spec here.
Repeating Vucko's answer:
.options {
display: inline-block;
vertical-align: middle;
}
You can use inline-block instead of float, and than you can use the vertical-align property:
.plan-container>div{
display: inline-block;
vertical-align: middle;
}
JSFiddle
However, beware of the whitespace issue.
Try it-
.plan-container {
display: flex;
flex-wrap: wrap; /* optional. only if you want the items to wrap */
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
What I am trying to do is:
HTML
<footer>
<!-- ... -->
<span class="copyright">abc</span>
</footer>
CSS (sass)
footer {
// ...
text-align: center;
> .copyright {
position: absolute;
bottom: 0;
display: inline-block;
}
}
So simply to pull the copyrigh down to the bottom of the parent block and center it. It's pretty easy using position: absolute, however, the centering the way using display: inline-block on the child element and text-align: center on the parent element wouldn't work then.
Is it possible to put the copyright down while keeping it relative?
Flexbox can do that if the height of the parent is defined or resolvable.
Complete Codepen Demo
footer {
height: 150px;
width: 80%;
margin: auto;
border: 1px solid red;
display: flex;
flex-direction: column;
}
header {
background: plum;
}
.copyright {
margin-top: auto;
/* push to bottom */
background: red;
align-self: flex-start;
/* collapse to own width */
margin-left: auto;
/* centering */
margin-right: auto;
}
<footer>
<header>I'm a header</header>
<span class="copyright">Copyright</span>
</footer>
Although I agree flexbox can be used, its browser support is not awesome on IE (Caniuse).
I would use just simple block with text-centering.
JS Fiddle
Here it is in simplicity:
footer {
border: 1px solid #900;
}
footer > .copyright {
padding: 50px 0 10px;
text-align: center;
}
If you really need to use inline-block, add this to copyright CSS:
display: inline-block;
width: 100%;
I am creating a site in bootstrap, and I want to know how to vertically center two child divs inside of a parent div. I know this is probably pretty simple, but I have tried everything and it will not work.
(http://codepen.io/cjhill02/pen/VLPERd)
try margin:auto
* {
border: 1px solid #ddd;
}
section {
padding: 100px 0;
margin: auto
}
.col-md-6{
margin: auto
}
for IE9 and IE10 put display:table to parent div and set attribute vallign="middle";display:table-cell to child element
vallign is a basic property supperted by old browsers as well as some new browsers
You can always do it with display: flex;
JS Fiddle
.container {
display:flex;
width:100%;
align-items: center;
justify-content: center;
height: 400px;
border: 4px solid black;
}
.container div {
display:flex;
align-items: center;
justify-content: center;
}
.container > div {
width: 40%;
background-color: red;
height: 221.5433px;
}
.container > div + div {
width: 40%;
background-color: brown;
height: 278.8431px;
}
<div class="container">
<div>centered</div>
<div>centered</div>
</div>
Do we know the height of the parent div? if so you can do like here
.row {
justify-content: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Please see here for result.
I am trying to center 3 boxes in the middle of my container. However, I cannot get it working.
What am I doing wrong?
HTML
<div id="boxes">
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
</div>
CSS
#boxes {
width: 800px;
background-color: yellow;
float: left;
}
#boxes .box {
width: 100px;
height: 100px;
margin: 10px;
float: left;
background-color: blue;
}
JSFiddle with the problem: http://jsfiddle.net/3cUF5/
If you need a crossbrowser solution, then use display: inline-block for inner boxes and align with text-align: center on parent.
Example fiddle: http://jsfiddle.net/RhBEz/1/
Css
#boxes {
width: 800px;
background-color: yellow;
float: left;
text-align: center;
}
#boxes .box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
}
A second approach is using display: flex, but this will work only on recent Chrome and Firefox:
Example: http://jsfiddle.net/2mxET/1/
Css
#boxes {
width: 800px;
background-color: yellow;
float: left;
display: flex;
justify-content:center;
}
#boxes .box {
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
}
Using float: left on .box means they cannot be centered. You also needed to add text-align: center to #boxes
Please see a working version here http://jsfiddle.net/s455x/
Just add margin:0 auto; for #boxes
CSS
#boxes {
width: 800px;
background-color: yellow;
float: left;
margin-left:auto;
margin-right:auto;
}
Now your outer container #boxes is aligned to center
http://jsfiddle.net/3cUF5/2/
#boxes {
text-align: center;
}
#boxes .box {
float: left; /* removed this line */
display: inline-block;
}
When you're trying to center elements, it's not a good idea to use floats. You have two basic options when centering elements.
do display: inline-block; to the child elements, and text-align: center; to the parent element
or
do display: block; to the element you want centered, as well as margin: 0 auto;
Not sure what browsers' you are trying to support but FlexBox makes this super easy, and if non-supported browsers are a requirement then you can just provide a fallback that works.