• support@answerspoint.com

How to CSS box in middle of content?

370

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


0

You can use margin-right:auto and margin-left:autoon an element with fixed width (eg. width:980pxwidth: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 h1h2p, 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 2 years ago
  • G John

Your Answer

    Facebook Share