Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
3.00/5 (1 vote)
See more:
Hello, I am having trouble trying to center my logo/text. Every time I try to center the logo/text the logo goes on top of the text any ideas?

When it is not centered it looks like this: http://imgur.com/NMK6VB4,Pmjr7f7
^ that is How i want it but in the center.

when it is centered it looks like this : http://imgur.com/lxkmZTX


HTML:
HTML
<html>
	<head>

	<title>KeyStone Coffee</title>
<link rel="stylesheet" href="styles/styles.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</style>
</head>
<div class="wrapper">

    <body>

        <body>
            <header>
                <center>
				<div class="Company_Logo"> 
				<img src="banner/1.png" alt="Company Logo" height="200" width="200"/>
				 
				
				</div>
               
                <center>
                    <div class="Company_Text">
                            <h1>Keystone Coffee</h1>
							 
					
                    </div>
					
                </center>
				</center>
                <div class="HPFGAC">
                    <nav>
                        <ul>
                            <center>
                                <li><a href="index.html">HOME</a>

                                </li>
                                <li><a href="Products/Products.html">PRODUCTS</a>

                                </li>
                                <li><a href="#">FLAVORED COFFEE</a>

                                </li>
                                <li><a href="#">GUIDE TO THE PERFECT TASTE</a>

                                </li>
                                <li><a href="#">ABOUT</a>

                                </li>
                                <li><a href="#">CONTACT</a>

                                </li>
                            </center>
                        </ul>
                    </nav>
                </div>
			
			</header>
	</div></html>


CSS:
CSS
#wrapper {
     height: 850px;
     width: 960px;
     margin:0 auto;
     background-repeat: no-repeat;
     background-position: center center;
 }
 .row:after {
     clear: both;
 }
 .col {
     background: black;
     border-radius: 5px;
     color: white;
     padding: .5px;
     float: left;
     margin: 1%;
     width: 100%;
 }
 .row:after {
     clear: both;
 }
 .col {
     background: black;
     border-radius: 5px;
     color: white;
     padding: .5px;
     float: left;
     margin: 1%;
     width: 100%;
 }
 .WebContainer {
     width: 100%;
     height: auto;
 }
 .articles {
     width:90%;
     height: auto;
     margin: auto;
 }
 .DIV {
     margin-left:0px;
     margin-right:0px;
 }
 .box2 {
     display: inline-block;
     width: 100%;
     height: 100px;
     margin: 1em;
 }
 html {
     overflow: scroll;
     height: 100%;
     margin: auto;
     width:100%;
 }
 body {
     height: 960px;
     margin: 0;
     padding:0;
     width:100%;
     text-align:center;
 }
 header {
     background: white;
     color: Black;
     padding: 0px 15px 15px 15px;
     float: center-side;
     margin-left: auto;
     margin-right: auto;
 }
 header h1 {
     margin: 0px;
     display: inline;
     float: center-side;
     margin-left: auto;
     margin-right: auto;
 }
 nav ul {
     margin: 0px;
     padding : 0 0 15px 0;
     display: inline;
     float: center-side;
     margin-left: auto;
     margin-right: auto;
 }
 nav ul li {
     background: wwhite;
     color: #9D795B;
     display: inline-block;
     list-style-type: none;
     padding: 5% 15px 20px 15px;
     margin: 0;
     float: center-side;
     margin-left: auto;
     margin-right: auto;
     font-size: 1.875em;
     white-space:nowrap;
 }
 nav ul li a {
     color: #9D795B;
     float: center-side;
     margin-left: auto;
     margin-right: auto;
 }
 .Company_Logo {
     float: center;
     padding: 2px 2px 2px 2px;
 }
header center{
    overflow: hidden;
}
 .Company_Text {
     padding-top: 30px;
     color:#9D795B;
    text-align: center;
     font-size:50.5px;
     font-family:'Lobster', cursive;
     white-space:nowrap;
 }
 .HPFGAC {
     clear: both;
     font-family:'Anton', sans-serif;
     white-space:nowrap;
 }
 .HPFGAC a:link {
     text-decoration: none;
 }
 .HPFGAC a:visited {
     text-decoration: none;
 }
 .HPFGAC a:hover {
     text-decoration: underline;
 }
 .HPFGAC a:active {
     text-decoration: underline;
 }
Posted

1 solution

Note: Not the perfect way but it works.
Do following changes -
1. Wrap both the div inside a parent div of width:100%
2. Fix width of both the child div
2. Make both the child div to be float:left
3. Make logo image div to text-align:right
4. Make logo text div to text-align:left

That's it !
CSS:
CSS
.Company_Logo {
     padding: 2px 2px 2px 2px;
     width:35%;
     text-align:right;
     float:left;
.Company_Text {
     padding-top: 30px;
     color:#9D795B;
     font-size:20px;
     font-family:'Lobster', cursive;
     white-space:nowrap;
     width:60%;
     float:left;
     text-align:left;
 }

HTML:
HTML
<div style="width:100%;text-align:center;">
        <div class="Company_Logo"> 
                <img src="banner/1.png" alt="Company Logo" height="100" width="100" />
        </div>
        <div class="Company_Text">
                <h1>Keystone Coffee</h1>
        </div>
</div>	


Hope, this helps :)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900