I want to have a centered grid of buttons that take up the full width, but I can't seem to get the container centered no matter what I try.
Here's the jsfiddle - https://jsfiddle.net/a6qo6tzL/
Thanks
<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>
CSS
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
float: left;
width: 250px;
text-align: center;
text-transform: uppercase;
}
Your main problem is that your gridButton has
float: left;
Instead, use
display: inline-block;
Now your buttons can move freely next to one another and be centered. Your wrapper element is already full width but you'll need to tell it to center its content:
.Wrapper {
display:block;
width: 100%;
text-align: center;
}
You can get rid of margin: 0 auto because that will only affect blocks with a known width.
.Wrapper {
display: block;
text-align: center;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
display: inline-block;
width: 250px;
text-align: center;
text-transform: uppercase;
}
<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>
You've got .Wrapper set to 100% width, so even though you have margin: auto, the container is full width and will not appear centered. Set it to a constant width at a higher breakpoint:
#media (min-width: 500px) {
.Wrapper {
width: 500px;
}
}
Then consider wrapping your buttons in a columns:
.cell {
float: left;
width: 50%;
}
Here is your updated fiddle.
Use flexbox:
.Wrapper {
display:flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
margin: 0 auto;
width: 100vw;
}
DEMO
I also replaced the width to viewport units
have a look here if this is what you want
https://jsfiddle.net/Raider/744wv0o7/
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
border:1px solid;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px auto;
/*float: left;*/
width: 250px;
text-align: center;
text-transform: uppercase;
}
Is this what you need?
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
width: 250px;
text-align: center;
margin:auto;
text-transform: uppercase;
}
You where using float:left; property which prevents the div's from being centered
Related
I try to set my box to the bottom part of the div, but it appears on the top part of the div even I have set bottom:0px;
Here is the link of my code : js fiddle
<div class="container">
<p class="box bottom0" style="background-color:grey">Category1</p>
<p class="box bottom0" style="background-color:red">Category2</p>
<p class="box bottom0" style="background-color:blue">Category3</p>
</div>
margin: 0 auto; height: 500px;
}
.bottom0{
bottom: 0px;
}
.box{
font-size: 15px;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 0px;
margin-right: 30px;
width: auto;
height: auto;
float: left;
display:inline-block;
}
You can use flex on the container
.container {
display: flex;
align-items: flex-end;
}
or
.container {
display: flex;
}
.bottom0{
align-self: flex-end;
}
.container {
width: 960px;
margin: 0 auto;
height: 500px;
display: flex;
}
.bottom0{
align-self: flex-end;
}
.box{
font-size: 15px;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 0px;
margin-right: 30px;
width: auto;
height: auto;
float: left;
display:inline-block;
}
<div class="container">
<p class="box bottom0" style="background-color:grey">Category1</p>
<p class="box bottom0" style="background-color:red">Category2</p>
<p class="box bottom0" style="background-color:blue">Category3</p>
</div>
the bottom property has no effect on statically positioned elements (elements have position: static by default)
you need to set a position: relative on the container and position: absolute on .box in order to see that property work.
You can try this -
<div class="container">
<div class="bottom0">
<p class="box" style="background-color:grey">Category1</p>
<p class="box" style="background-color:red">Category2</p>
<p class="box" style="background-color:blue">Category3</p>
</div>
</div>
and add position:absolute in bottom0 css
.bottom0{
bottom: 0px;
position: absolute;
}
I am trying to achieve something that looks like this:
I don't know how many green elements will be rendered, because that is determined by the CMS and how many components the author decides to put in there.
The requirement is that there are 5 boxes per row before it wraps.
The problem is: margin: auto doesn't work when I set the red wrapper to inline-block.
div.container {
background: black;
padding: 10px;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
just add text-align center to div.container
As Muhammad Usman suggested, add text-align: center to .container. The text-align-property always refers to the content of the target element.
div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
Give the container div this property
text-align: center;
Here's a fiddle
Centering with margin: auto doesn't work for elements that have inline-block as display property.
You can, however, just center such elements by setting the text-alignment of their parent elements to center. Then, (re)set the text-alignment of the elements you want to center to whatever text-alignment you need there.
Demo
.container {
background: black;
padding: 10px;
text-align: center; /* Center */
}
.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
text-align: left; /* Reset alignment */
}
.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
See also this Fiddle!
I have a header row where some of the header names are too long to fit on one line and have to be split. The headers are fixed height, sufficient for two lines. The text should be vertically centered.
Something like:
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
I can't figure out how to align all those headers correctly. Setting line-height to 40px makes the second header double-height; setting height to 40px throws them out of alignment.
Thanks!
So this is what I changed in your code:
Add vertical-align: middle to align the pills
Give line-height same as height for the pills other than split using the not selector:
.pill:not(.split) {
line-height: 40px;
}
In smaller displays the menu will wrap - so use float and clear them too.
Let me know your thoughts on this, thanks!
.container {
width: 100%;
height: 40px;
}
.pill {
display: inline-block;
vertical-align: middle;
float: left;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
}
.pill:not(.split) {
line-height: 40px;
}
.pill:after{
content: '';
display: block;
clear: both;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
Flexbox can do that:
.container {
width: 100%;
height: 40px;
display: flex;
}
.pill {
display: flex;
flex: 0 0 30%;
margin: 0 1%;
justify-content: center;
align-items: center;
text-align: center;
background-color: red;
height: 40px;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill split">
LONG HEADER TEXT GOES HERE
</div>
<div class="pill">
Header Three
</div>
</div>
One option is change the way you are setting the elements side by side, so instead of inline-block:
Table-cell
.container {
width: 100%;
height: 40px;
}
.pill {
padding:10px;
border:1px solid white;
display: table-cell;
width: 33%;
background-color: red;
text-align: center;
height: 40px;
vertical-align:middle;
}
<div class="container">
<div class="pill">
Header One
</div>
<div class="pill">
Header
<br/>Two
</div>
<div class="pill">
Header Three
</div>
</div>
Add the following to your .pill css:
vertical-align:middle;
Here is an example
My 2 secondary div don't want to be at the center of the primary.
I have this code :
HTML:
<div id="body">
<div id="content">
<div id="contact">
<div class="contact">
<img id="contact_photo" src="images/contact_photo.png">
</div>
<div class ="contact" id="contact-text">
some text<br>
some text<br>
some text
</div>
</div>
</div>
</div>
CSS :
#body{
background-image: url("../images/background_body.png");
height : 100%;
width:101%;
margin : 10px -10px;
overflow: hidden;
}
#content{
color: white;
padding: 0 0 0 395px;
height: 100%;
overflow: hidden;
font-family: "Lato";
font-size: 26px;
}
#contact{
font-size: 26px;
font-family: "Lato";
color: white;
width: 1035px;
/* background-color: green;*/
display: flex;
padding: 35px 80px 0 80px;
float:left;
text-align: center;
}
.contact{
float: none;
display: inline-block;
text-align:left;
}
#contact-text{
width: 385px;
height: 145px;
}
#contact_photo{
margin-right: 40px;
}
If someone can help me, I saw everywhere that they centered the div only with :
text-align: center;
and
float: none;
display: inline-block;
I don't find what's the matter.
Thank you
Try this:
.contact {
margin: 0 auto;
}
This makes the margins on right and left sides set to the same so that the item will be displayed in the center;
How do I target just the text inside the div in order to make the numbers center in the circles? https://jsfiddle.net/Amidi/nevg4gcq/3/
<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>
.beads{
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
}
Just give line-height: 35px; to make text center. line-height equals to height of the div.
Working Fiddle
Use display:table for parent and display: table-cell for cell. You must have child element for this approach.
Try this:
.beads {
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
display: table;
}
.beads span {
display: table-cell;
vertical-align: middle;
}
<div class="beads"><span>1</span>
</div>
<div class="beads"><span>2</span>
</div>
<div class="beads"><span>3</span>
</div>
<div class="beads"><span>4</span>
</div>
<div class="beads"><span>5</span>
</div>
<div class="beads"><span>6</span>
</div>
<div class="beads"><span>7</span>
</div>
Fiddle here
try this:
.beads{
background-color: coral;
border-radius: 100%;
height: 35px;
width: 35px;
text-align: center;
color: whitesmoke;
margin-top: 5px;
line-height: 35px
}
<div class="beads">1</div>
<div class="beads">2</div>
<div class="beads">3</div>