How to CSS box in middle of content?
I am trying to make a site that looks like this page http://www.csgoshuffle.com/howto.
I don't want the top right button to be functional, it will be just a picture. What I need help with is trying to make the content that looks like a grey background with box inside it.
I made the background but I need to make the box inside it and learn how to type the <p> inside the box.
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
header {
width: 100%;
height: 90px;
background-color: #212022;
border-bottom:1px solid orange;
}
main {
background-color: #181719;
}
footer {
width: 100%;
height: 167px;
background-color : #212022;
border-top:1px solid orange;
}
p{
color: white
}
#logo{
width: 520px;
height: 80px;
background: url('//i.imgur.com/PHXLLsn.png') no-repeat scroll center;
margin-top:5px;
left: 120px;
float: left;
position: absolute;
}
#steamlogin{
width:154px;
height: 23px;
background: url('//i.imgur.com/qKairpt.png');
margin-top: 32px;
float: right;
position: absolute;right: 130px
}
<body class="Site">
<header>
<div class="wrapper">
<div id="logo"></div>
<div id="steamlogin"></div>
</header>
<main class="Site-content">this is content</main>
<footer>this is footer</footer>
</body>
1Answer
You can use margin-right:auto and margin-left:autoon an element with fixed width (eg. width:980px, width:80%) to center that element. (I used margin property's shorthand version like margin: 50px auto;)
If you want to center elements contain text like h1, h2, p, etc. you can use text-align:center on those elements.
in the example below i created a div element with a class named "centered" and you can see how i centered the h2 elements, too. I hope this helps you.
http://jsfiddle.net/t5m4ew3r/4/
Also i suggest you to check out some html/css tutorials. you can easly find them on the internet. By this way you can learn better.
- answered 8 years ago
- G John
Your Answer