body {
max-width: 1000px !important;
margin-right: 5%;
margin-left: 5%;
height: 100%;
}
Trying to proportionally center my content, while keeping a max-width at 1000px seem to not work.. is there a work around this? It's important to keep the 5% margins for this project..
It aligns all my content to the left..
If you have to center the content of your page with a 5% margin left and right on resolution under 1000px you can use this code:
.container{
width:90%;
max-width:1000px;
margin:0 auto;
background-color: red;
height:500px;
}
<body>
<div class="container"></div>
</body>
Over 1000px the content result centered in your page.
Try setting the following to your element to align items center.
div{
display: flex;
justify-content: center;
align-items: center;
}
body {
margin: 0;
padding: 0;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
<div> Loreum Ipsum</div>
Instead of this you can create a div and add CSS on that
body {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 100%;
max-width: 1000px;
margin: 0px auto;
height: 100%;
text-align: center;
}
<div class="wrapper"> Your html code placed here </div>
You can do it without touching the body tag. Div is just enough.
.is-centered {
max-width: 1000px;
margin: 0 auto;
display: block;
padding: 2px;
width: 100%;
text-align: center;
height: 100%;
}
.grey {
background: grey;
color: white;
}
<div class="is-centered grey">
<p>this is centered!</p>
</div>
Ok thanks for the suggestions.. I found that removing the max-width in the body, and adding it to the divs inside the body helped to keep the centered look, while using the 5% side margins..
body {
margin-right: 5%;
margin-left: 5%;
height: 100%;}
<div style="max-width:1920px">content</div>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 1 year ago.
Flexbox align-items: center; is not working.
I want to position .container at the center
Here is the code for it, I don't understand why
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
display: flex;
justify-content: center;
align-content: center;
}
.container {
position: relative;
background-color: white;
width: 100%;
max-width: 1000px;
min-height: 100px;
}
<div class="container">
<div class="peronal"></div>
<div class="profess"></div>
</div>
To center your .container, presumably inside a body as big as the browser window, size the body element.
Right now your body element has the default height: auto, which means it will be as tall as the content inside of it. You set min-height: 100px on your .container, so that’s the size of the auto-sized body.
So you’ll want to make your body as big as the browser window, and then center your .container element inside:
body{
margin: 0;
box-sizing: border-box;
min-height: 100vh;
background-color:black;
display:flex;
justify-content:center;
align-items: center;
}
.container{
background-color: white;
max-width: 1000px;
min-height: 100px;
}
.personal {
padding: 24px;
background-color: tomato;
}
.professional {
padding: 24px;
background-color: seagreen;
}
<div class="container">
<div class="personal">a</div>
<div class="professional">b</div>
</div>
if you want to vertically center the parent you need a height
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color:black;
display:flex;
justify-content:center;
align-content:center;
align-items:center;
min-height: 100vh;
}
.container{
position:relative;
background-color: white;
width: 100%;
max-width: 1000px;
min-height: 100px;
}
<div class="container">
<div class="peronal">one</div>
<div class="profess">two</div>
</div>
I'm trying to make make the popup have some extra blank space around and I am using margin: auto; and position:relative; to center it because justify-content: center; doesn't allow scrolling to the top or bottom. I tried a lot, positioning, bottom and top values but no success. At this point, I had to come here. CSS isn't my power, what should I do?
#media screen and (max-height: 812px) {
body .read {
padding: 12px 0;
overflow-y: scroll;
justify-content: flex-start;
}
body .read div {
height: auto;
max-height: 812px;
flex-shrink: 0;
min-height: min-content;
}
body .read div:nth-child(1) {
margin: auto;
}
body .read div .containerbox {
height: 100px;
min-height: auto;
max-height: 420px;
}
body .read div .interact {
height: auto;
min-height: auto;
}
}
<div class="read">
<div>
<h1>Message Title</h1>
<h2>2020/08/01</h2>
<h2>John</h2>
<div class="containerbox">
<h3>Message Text</h3>
</div>
<div class="interact">
<button><h2>Reply</h2></button>
<button><h2>Erase</h2></button>
<button><h2>Close</h2></button>
</div>
</div>
</div>
Not sure I understand completely your goal. But I would use the following:
body .read div:nth-child(1) {
margin: auto;
margin-bottom: 12px;
}
I'm trying to insert 3 images in my main section. I want to align them but my third image stays at the bottom of my page. I tried to shrink the images but nothing change. I used "margin-left" "margin-bottom" and "float" but nothing works.
main section h1 {
margin-right: 10px;
margin-top: 150px;
float: left;
}
main section h2 {
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
main section h3 {
margin-top: 150px;
margin-left: 10px;
float: right;
}
You can use display: flex, for example:
HTML
<body>
<div>
<img src='1.jpg'>
<img src='2.jpg'>
<img src='3.jpg'>
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;//ALIGN DIV VERTICALLY
}
div{
display: flex;
justify-content: center;//ALIGN IMG'S HORIZONTALLY
width: 100%;
}
img{
width: 300px;
height: 180px;
}
img:nth-of-type(2){
margin: 0 20px
}
Look the result in this link: https://imgur.com/a/VwmvRjp
I'm working on project which includes a login/register page. It's basically a white div in body which should be centered verticaly and horizontally, but sometimes can be bigger than body.
When div is small everything is okay, but when its bigger than body then I just want it to have small padding on top and bottom.
How can I achieve that ? I have been searching for answer whole day and finally I'm here. Help me people :C
#wrap {
height: 300px;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>
You can use min-height instead of height and a small top and bottom padding on the wrapper as shown below. When the inner element is higher than the wrapper, it will extend the wrapper and additionally keep the padding .
#wrap {
min-height: 300px;
padding: 10px 0;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>
Use min-height instead of height, and add padding to top and bottom. Use box-sizing: border-box to prevent the padding from changing the height:
.wrap {
box-sizing: border-box;
min-height: 300px;
width: 150px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
.content {
background: #000;
width: 100px;
height: 400px;
}
/** for the demo **/
.content--small {
height: 100px;
}
body {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
<div class="wrap">
<div class="content">
</div>
</div>
<!-- for the demo -->
<div class="wrap">
<div class="content content--small">
</div>
</div>
^As title says^. I need to scale padding by a browser's width. I tried this:
html, body{
height: 100%;
}
body{
display: table;
margin: 0 auto;
}
#center{
display: table-cell;
vertical-align: middle;
}
.box{
padding: 25%;
background: #000;
color: white;
}
h1{
margin: 0;
padding: 0;
}
<div id="center">
<div class="box">
<h1>Hello world</h1>
</div>
</div>
But it doesn't work. Is there any way I can do it? I want to center the div using display: table;, not using flexbox or position: absolute. Thanks.
Use vw which is percent of viewport width.
html, body{
height: 100%;
}
body{
display: table;
margin: 0 auto;
}
#center{
display: table-cell;
vertical-align: middle;
}
.box{
padding: 5vw;
background: #000;
color: white;
}
h1{
margin: 0;
padding: 0;
}
<div id="center">
<div class="box">
<h1>Hello world</h1>
</div>
</div>
See fiddle here you can resize the viewable area and see the padding size change.
You should use flex-box to make vertically center.
html, body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
justify-content: center
}