css - Align text to center with image on the same line -


i'm trying center text got image in same line, , centers text rest of line, not center of browser.

here's jsfiddle - http://jsfiddle.net/hdn9w/1/

i know can change:

.text1 {     line-height: 450%;     font-size: 30px;     font-family: david;     text-align: center; } 

to:

.text1 {     line-height: 450%;     font-size: 30px;     font-family: david;     margin-left: 550px; } 

but that's won't work on different browsers , iphone , stuff, , i'm pretty sure it's possible can't seem find it. i'm assuming it's "display" or "position" or "overflow" nothing seem work..

thanks in advance.

the code is:

<body>     <div class="container">          <div class="header">              <div class="logo">                 <img src="http://www.saludmedellin.com/wp-content/uploads/2014/01/dfd1.jpg" />             </div>              <div class="text1">                 stocks trader             </div>          </div>          <div class="bodier">             <form>                 <input type="text" />                 <input type="submit" />             </form>         </div>      </div>   </body> 

and css:

body {     background-color: #c4dbe5; }  .header {     background-color: #5a9ab7;     border-radius: 10px;     height: 100px; }  .logo img {     width: 80px;     height: 80px;     float: left;     padding: 10px; }  .text1 {     line-height: 450%;     font-size: 30px;     font-family: david;     text-align: center; } 

maybe want this:

-text horizontal/vertical align header: -also hide logo on small screens doesnt in way.

http://jsfiddle.net/luckmattos/hdn9w/6/

css modifications:

body {     background-color: #c4dbe5; }  .header {     background-color: #5a9ab7;     border-radius: 10px;     height: 100px;     position:relative; }  .logo img {     width: 80px;     height: 80px;     float: left;     padding: 10px; }  .text1 {     line-height: 100px;     font-size: 30px;     font-family: david;     text-align: center;     position:absolute;     left:0px;     right:0px; }  @media (max-width:480px){ .logo {     display:none; } } 

Comments

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -