Center text inside two divs horizontally


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

</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!


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; }

<a href="http://jsfiddle.net/5uhJF/" rel="nofollow">FIDDLE</a>


Add text-align:center for the paragraph.

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


Your content "DESIGN" seem to be overflowing its container thus placing it off-center. Look at this <strong><a href="http://jsfiddle.net/bq852/4/" rel="nofollow">demo</a></strong> where I have added overflow: hidden to .design.

With your updated CSS, including text-align: center for .design you could either <strong><a href="http://jsfiddle.net/bq852/1/" rel="nofollow">reduce the font-size</a></strong>, reduce the <strong><a href="http://jsfiddle.net/bq852/2/" rel="nofollow">padding of .microcontainers</a></strong> or <strong><a href="http://jsfiddle.net/bq852/3/" rel="nofollow">add negative margin on the





in your design class


Just adding text alignment will fix it see <a href="http://jsfiddle.net/6JET2/" rel="nofollow">this Fiddle</a> doing exactly what the above user suggested.

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

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 <a href="http://getbootstrap.com" rel="nofollow">bootstrap</a>


You can use center tags also

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

</div></center> <center><div class="microcontainers"> </div></center> </div>


  • createEnvelope class create only first Docusign document not others
  • Changing the background color of a select2 selection within the select field
  • How to solve the jshint error `Don't make functions within a loop.` with jquery $.grep
  • How to remove all of a jQuery UI dialog when it is closed
  • d3.js: why is d3.geo.path() giving NaN?
  • How to use animated gif in Firemonkey?
  • MultiLevel ExpandableListView not highlighting properly
  • jQuery - resize an elements height to match window without refreshing, on window resize
  • cell spacing in div table
  • using html data-attributes as css-variable (i.e. text-shadow)
  • Drawing a Path in XAML (with binding) vs. C#. One works, one doesn't
  • chrome video src change not working
  • WPF Template Binding in ToggleButton UserControl
  • WPF version of .ScaleControl?
  • Hibernate to update table schema
  • blade.php method outputting it's result to the form
  • Floated image with variable width and heading with background image
  • D3 get axis values on zoom event
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Jackson Parser: ignore deserializing for type mismatch
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Change multiple background-images with jQuery
  • Repeat a vertical line on every page in Report Builder / SSRS
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Modifying destination and filename of gulp-svg-sprite
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Trying to switch camera back to front but getting exception
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Change div Background jquery
  • python draw pie shapes with colour filled