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
Post a Comment