css - Center Elements Inside of a Div -


i have div elements need centered:

<div style="width:800px;margin:0 auto;color:#000;"><h3 style="float:left;color:#000;margin:0 10px;"> test </h3><h4 style="float:left;padding-top:3px;"> | </h4><h3 style="color:#000;float:left;margin:0 10px;"> test </h3></div> 

however, elements stay left. how fix , center h3's , h4's?

here example: http://approvemyride.ca/reno/

http://jsfiddle.net/zejdc/

html:

<div>     <h3> test </h3>     <h4> | </h4>     <h3> test </h3> </div> 

css:

div {     width: 800px;     margin: 0 auto;     color: #000;     text-align: center; }  h3 {     color: #000;     margin: 0 10px;     display: inline-block; }  h4 {     padding-top: 3px;     display: inline-block; } 

check out , let me know think, if doesn't centered when first open try stretching little divider left give results pane more room.

to clarify, display:inline-block what's allowing headers displayed on same line while text-align:center what's centering of header elements inside <div>.


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -