0

How to I can I center this texts horizontally which is inside two divs. When I'm previewing it in Dreamweaver, it is finely centered.

My HTML codes:

<div class="maincontainer">
    <div class="microcontainers">  
         <p class="design"><span style="color: #F90;">D</span>ESIGN</p>  
    </div>  
    <div class="microcontainers">  
    </div>
</div>

My CSS Style:

#maincontainer{   
    width:1120px;
    height:auto;
    background-color:#E4E4E4;
    margin-left: auto;
    margin-right: auto;
    margin-top: 124px;
    padding: 40px 40px 40px 40px;
    overflow: hidden;
    display:block;
    text-align: center; 
}

.microcontainers{
    width: 350px;
    height: 600px;
    border:  #999 1px solid;
    margin: 40px 40px 40px 40px;
    padding: 15px 15px 15px 15px;
    display: inline-block;
    overflow: hidden;
}

.design{
    font-family: TrajanPro-Regular; 
    font-size:85px;
    color: #999;
    text-align: center;
    display: block;
margin: 0 auto;
}

Thank you and more power!

JOE MAYA
  • 35
  • 8
  • You are using `#maincontainer` (id-selector) in your CSS and `class="maincontainer"` in your HTML. If you want the CSS rule to apply you should change it to `.maincontainer` – Mathias May 26 '14 at 08:18

6 Answers6

1

Add text-align:center for the paragraph.

.design{
    font-family: TrajanPro-Regular; 
    font-size:85px;
    color: #999;
    text-align:center;
}
Mathias
  • 5,642
  • 2
  • 31
  • 46
Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
  • Thanks. Sorry I forgot to put centering tags. I've used text-align: center, display:block, margin: 0 auto ect... but to no avail.. – JOE MAYA May 26 '14 at 08:19
1

Your content "DESIGN" seem to be overflowing its container thus placing it off-center. Look at this demo where I have added overflow: hidden to .design.

With your updated CSS, including text-align: center for .design you could either reduce the font-size, reduce the padding of .microcontainers or add negative margin on the <p> element

Mathias
  • 5,642
  • 2
  • 31
  • 46
1

v Please try this, it may solve your problem.

There is some CSS changes.

.microcontainers{
    width: 350px;
    height: 600px;
    border:  #999 1px solid;
    margin: 40px 40px 40px 40px;
    padding: 15px 15px 15px 15px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    position: relative;
}

.design{
    font-family: TrajanPro-Regular; 
    font-size:85px;
    color: #999;
    position: absolute;
    left:0;
    right:0;
}

FIDDLE

Raman Mandal
  • 276
  • 1
  • 6
0

add

text-align:center;

in your design class

rAm
  • 199
  • 2
  • 19
0

Just adding text alignment will fix it see this Fiddle doing exactly what the above user suggested.

.design{
font-family: TrajanPro-Regular; 
font-size:85px;
color: #999;
    text-align: center;
}

but I don't see why you are doing this can you explain it..If you are doing a big project i suggest you use bootstrap

Yonas
  • 50
  • 2
  • 7
  • Thanks Yonas T. in fiddle it works. But on browsers, like Chrome and Google it wont. The text is thrown to the right side of the div despite of all the centering tags. Thanks! – JOE MAYA May 26 '14 at 08:36
  • @JOEMAYA Chrome and Google are same by the way. – Rahil Wazir May 26 '14 at 08:45
  • Have you tried to make the font size for the design class smaller? I think you should Start by small font size then try to scale it up. It will help you see where the problem came from. – Yonas May 26 '14 at 08:45
  • Yup. I tried. I started 12pts. It's still a aligned right. Now, I figured it out. Thanks man! – JOE MAYA May 26 '14 at 08:52
  • No problem dude! Nice that you finally got it fixed. – Yonas May 26 '14 at 09:03
-2

You can use center tags also

<div class="maincontainer">
    <center><div class="microcontainers">  
         <p class="design"><span style="color: #F90;">D</span>ESIGN</p>  
    </div></center>
    <center><div class="microcontainers">  
    </div></center>
</div>
Sam
  • 41
  • 2
  • 13