0

Can someone help me with this? I've played with it a bunch and I can't figure it out, fixed it before but I forgot how to.

I'd like to align it horizontally without them overlapping vertically, would love the help. :)

Thanks, solved!

HTML: 

     <div class="contain-info"><!-- contain -->
 <div class="info1">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div>  

 <div class="info2">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 

 <div class="info3">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 
 </div><!-- contain -->

CSS:

.contain-info {
 display: inline-block;
 position: relative;
 text-align: center;
 margin-left: auto;
 margin-right: auto;

 }

.info1 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 float: left;
 position: absolute;
 }

.info1 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info1 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info2 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 margin: auto;
 position: absolute;

 }

.info2 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info2 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info3 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 position: absolute;
 float: right;
 }

.info3 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info3 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }
Venzire
  • 45
  • 1
  • 7

5 Answers5

1

Please check this modified version JsFiddle I hope this is what your trying to achieve. 

     .contain-info {
     position: relative;
     text-align: center;
     margin: auto;
     }


.info1 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 }

.info1 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info1 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info2 {
 font-family: "Bebas Neue";
 text-align: center;
 margin: auto;
 }

.info2 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info2 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info3 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 }

.info3 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info3 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }

I simply used 

 margin:auto
on the 
.contain-info
and removed off the inline-block styles
Lasitha Petthawadu
  • 753
  • 5
  • 18
0

You can try using the CSS flexbox model — the possibility of using flexbox to achieve the layout you want is almost endless. It might be a little hard to begin with, but once you're familiar with the model it's quite easy to get things done the way you want.

.contain-info {
    display: flex;
    justify-content: center;
    width: 100%;
}

In the example above, I ask the parent, .contain-info to display all children as flex items. The content is then justified, such that they will align themselves horizontally in the center of the parent element.

See proof-of-concept: JSfidde

Mozilla has a very comprehensive guide on using flexbox, but if you want a more user-friendly way to having it explained to you, look no further than Chris Coyier's article (currently down for site maintenance I suppose).

Terry
  • 63,248
  • 15
  • 96
  • 118
0

Elements with center class will be in the middle of their parent element Since you use divs. display:block is not necessary. Display of div's is block by default

.center
{
    position:relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
user2102266
  • 539
  • 3
  • 14
0

HTML

 <div class="contain-info"><!-- contain -->
 <div class="info">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div>  

 <div class="info">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 

 <div class="info">
 <h1>WHAT IS IT?</h1>
 <p>TEXT</p>
 </div> 
 </div><!-- contain -->

CSS

.contain-info {
 display: inline-block;
 position: relative;
 text-align: center;
 margin-left: auto;
 margin-right: auto;

 }

.info {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 float: left;
 position: relative;
 width:33%;
 }

.info p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }

Fiddle: http://jsfiddle.net/Maw6u/

MattOpen
  • 815
  • 11
  • 24
0

you are using display:inline-block in contain-info. hence i will recommend you to use text-align:center in parent of contain-info.

And float is not a attribute used in absolute positioned elements you should use left and right attributes. Check out the solution - http://codepen.io/anon/pen/abFzf

.container {
  text-align:center;
  width:100%;
}
.contain-info {
 position: relative;
 text-align: center;
  display:inline-block;
  margin:0 auto;
  width:100%;
 }

.info1 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 left:0;
 position: absolute;
 }

.info1 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info1 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info2 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 position: absolute;
 margin:0 auto;
 left:0;
 right:0;
 }

.info2 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info2 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;

 }

.info3 {
 font-family: "Bebas Neue";
 text-align: center;
 display: inline-block;
 position: absolute;
 right:0;
 }

.info3 p {
 font-size: 20px;
 font-family: "Agency FB";
 }

.info3 h1 {
 font-size: 70px;
 color: #fff;
 text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.6);
 font-weight: normal;
 }

I hope it helps.

adb
  • 1
  • 1