Reputation: 91

Centering an image in the header

This is really weird. I had an img link to my home page but I can't get it to center. I finally wrapped it in a div and it centered. But now I can't click it as a link. If I closed the div class="img" tag then it won't center but I can click it. It was centered before I started styling the form and didn't need a wrapper. I know there are other questions pertaining to centering an img, but I am at a complete loss. I tried text-aligning the header and then the img but still it won't work.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$( ".block" ).on( "click", function() {
  $(this).toggleClass( "active" );
    $(".link").toggle();
});
});
</script>
<meta charset="utf-8">
<title>Contact Us</title>
<link href="contact_us.css" rel="stylesheet" type="text/css">
</head>

<header>
            <div class="img"<a href="http://www.cloudhudl.com" alt="Cloud Hudl"><img src="white_logo.png" alt="Cloud Hudl"/></a></div>
</header>
<div class="block">

    <span class="collapse-arrow">
    <span class="two"></span>
    <span class="one"></span>

     </span>

    <div class="link" style="display:none">
     <ul>

  <li> <a href=”http://www.cloudhudl.com”>Home</a> </li>
  <li><a href=”http://www.cloudhudl.com/about-us”>About Us</a></li>
  <li><a href=http://www.cloudhudl.com/contact-us>Contact Us</a></li>
</ul>
    </div>
</div>
    <section id="main">
        <p>Have questions about what exactly Cloud Hudl is? How to get involved or what we hope to change about the industry? 
        Or something completely unrelated? Fill out the form below and we'll get back with you ASAP! A real person will reach
         out within one business day (Really!).</p>
</section>

    <section id="info">
        <p>Email: [email protected]</p>
        <p>Phone: (620) 605-2154</p>
<!-- Social media BUT REPLACE PICTURES!! -->
    <a target="_blank" title="follow us on Facebook" href="http://www.facebook.com/CloudHudl"><img alt="follow us on Facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/facebook40x40.png" border="0"></a>
    <a target="_blank" title="follow us on Linkedin" href="https://www.linkedin.com/company/cloud-hudl"><img alt="Follow us on Linkedin" src="linkedin.png" border="0"></a>
    <a target="_blank" title="Follow us on Twitter" href="https://www.twitter.com/cloudhudl"><img alt=Follow us on Twitter" src="twitter.png" border="0"></a>   

    </section>

    <form action="confirmation.htm" method="post" class="basic-grey">
        <div id="form">
    <span>Your Name :</span>
        <input id="name" type="text" name="name" placeholder="Your Full Name" />
    </label>

    <label>
        <span>Your Email :</span>
        <input id="email" type="email" name="email" placeholder="Valid Email Address" />
    </label>

    <label>
        <span>Message :</span>
        <textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
    </label> 
     <label>
        <span>&nbsp;</span> 
        <input type="submit" class="button" value="Send" /> 
    </label>    
</div>
</form>

    <footer>
        <address>
            Copyright 2015 &#169;
            (620) 605-2154
        </address>
    </footer>

</body>
</html>

CSS:

.img {
    text-align: center;
}

img {
    display: block;
    margin: auto;
    text-align: center;
}
ul {
    list-style-type: none;

    margin: 0;
    padding: 0;
}

.link{
    padding-bottom: 50px; 

}
a {
    display: block;
    width: 80px;
    color:red;
}

li {
     float: left;
    display: inline;
}
body{



}
h1{
    font-size: 60px;
    margin: 30px 10px 10px;
    color: #fff;
    font-weight: 300;
}
p{
    font-size:18px;
    margin-bottom:60px;
    color: #ddd;
}
b{
    font-weight: 400;
    color: #fff;
}
/* we use a block as example */
.block{
    width: 480px;
    padding: 10px;

    text-align: center;
    margin: 25px auto;
    border-radius: 5px;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    transition: all .7s ease;
}

.block.active{
    padding-bottom: 0px;
}
.collapse-arrow{
    display: inline-block;
    width: 43px;
    height: 16px;
    position: relative;
    margin: 20px auto 10px;

    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    transition: all .6s ease;
}

.collapse-arrow .one, .collapse-arrow .two{
    display: inline-block;
    position: absolute;
    height: 5px;
    width: 26px;
    top: 6px;
    background: #000;
    border-radius: 10px;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    transition: all .6s ease;
    -webkit-transition-delay: .6s;
    -moz-transition-delay: .6s;
    transition-delay: 1s;
}

.collapse-arrow .one{
    left: -1px;
    transform: rotate(32deg)
}
.collapse-arrow .two{
    right: -1px;
    transform: rotate(-32deg)
}

.active .collapse-arrow .one{transform: rotate(-32deg)} 
.active .collapse-arrow .two{transform: rotate(32deg)}

.collapse-arrow.black span{background: #111;}

//Form styles
/* Basic Grey */
#form {
postion: relative;
}
.basic-grey {
    position:absolute;
    top:55%;
    right:0;
    left:50%;
    width: 45%;
    background: #F7F7F7;
    padding: 25px 15px 25px 10px;
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #E4E4E4;
}
.basic-grey label {
    display: block;
    margin: 0px;
}
.basic-grey label>span {
    float: left;
    width: 20%;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea {
    border: 1px solid #DADADA;
    color: #888;
    height: 30px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 3px 3px 3px 5px;
    width: 70%;
    font-size: 12px;
    line-height:15px;
    box-shadow: inset 0px 1px 4px #ECECEC;
    -moz-box-shadow: inset 0px 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
    padding: 5px 3px 3px 5px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey .button {
    background: #E27575;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #FFF;
    box-shadow: 1px 1px 5px #B6B6B6;
    border-radius: 3px;
    text-shadow: 1px 1px 1px #9E3F3F;
    cursor: pointer;
}
.basic-grey .button:hover {
    background: #CF7A7A
}

Upvotes: 0

Answers (6)

Jason

Reputation: 5575

<header>
    <div class="img"
        <a href="http://www.cloudhudl.com" alt="Cloud Hudl">
            <img src="white_logo.png" alt="Cloud Hudl"/>
        </a>
    </div>
</header>

<img alt=Follow us on Twitter" src="twitter.png" border="0">

The above is not correct markup. The <div> tag should be properly closed, including the alt attribute. Like so:

<header>
    <div class="img">
        <a href="http://www.cloudhudl.com" alt="Cloud Hudl">
            <img src="white_logo.png" alt="Cloud Hudl"/>
        </a>
    </div>
</header>

<img alt="Follow us on Twitter" src="twitter.png" border="0">

Here is an example of it working

.img {
    text-align: center;
}

img {
    display: block;
    margin: auto;
    text-align: center;
}
ul {
    list-style-type: none;

    margin: 0;
    padding: 0;
}

.link{
    padding-bottom: 50px; 

}
a {
    display: block;
    width: 80px;
    color:red;
}

li {
     float: left;
    display: inline;
}
body{



}
h1{
    font-size: 60px;
    margin: 30px 10px 10px;
    color: #fff;
    font-weight: 300;
}
p{
    font-size:18px;
    margin-bottom:60px;
    color: #ddd;
}
b{
    font-weight: 400;
    color: #fff;
}
/* we use a block as example */
.block{
    width: 480px;
    padding: 10px;

    text-align: center;
    margin: 25px auto;
    border-radius: 5px;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    transition: all .7s ease;
}

.block.active{
    padding-bottom: 0px;
}
.collapse-arrow{
    display: inline-block;
    width: 43px;
    height: 16px;
    position: relative;
    margin: 20px auto 10px;

    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    transition: all .6s ease;
}

.collapse-arrow .one, .collapse-arrow .two{
    display: inline-block;
    position: absolute;
    height: 5px;
    width: 26px;
    top: 6px;
    background: #000;
    border-radius: 10px;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    transition: all .6s ease;
    -webkit-transition-delay: .6s;
    -moz-transition-delay: .6s;
    transition-delay: 1s;
}

.collapse-arrow .one{
    left: -1px;
    transform: rotate(32deg)
}
.collapse-arrow .two{
    right: -1px;
    transform: rotate(-32deg)
}

.active .collapse-arrow .one{transform: rotate(-32deg)} 
.active .collapse-arrow .two{transform: rotate(32deg)}

.collapse-arrow.black span{background: #111;}

//Form styles
/* Basic Grey */
#form {
postion: relative;
}
.basic-grey {
    position:absolute;
    top:55%;
    right:0;
    left:50%;
    width: 45%;
    background: #F7F7F7;
    padding: 25px 15px 25px 10px;
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #E4E4E4;
}
.basic-grey label {
    display: block;
    margin: 0px;
}
.basic-grey label>span {
    float: left;
    width: 20%;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea {
    border: 1px solid #DADADA;
    color: #888;
    height: 30px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 3px 3px 3px 5px;
    width: 70%;
    font-size: 12px;
    line-height:15px;
    box-shadow: inset 0px 1px 4px #ECECEC;
    -moz-box-shadow: inset 0px 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
    padding: 5px 3px 3px 5px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey .button {
    background: #E27575;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #FFF;
    box-shadow: 1px 1px 5px #B6B6B6;
    border-radius: 3px;
    text-shadow: 1px 1px 1px #9E3F3F;
    cursor: pointer;
}
.basic-grey .button:hover {
    background: #CF7A7A
}

.img a {
  display:inline-block;
}

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$( ".block" ).on( "click", function() {
  $(this).toggleClass( "active" );
    $(".link").toggle();
});
});
</script>
<meta charset="utf-8">
<title>Contact Us</title>
<link href="contact_us.css" rel="stylesheet" type="text/css">
</head>

<header>
            <div class="img"><a href="http://www.cloudhudl.com" alt="Cloud Hudl"><img src="white_logo.png" alt="Cloud Hudl"/></a></div>
</header>
<div class="block">

    <span class="collapse-arrow">
    <span class="two"></span>
    <span class="one"></span>

     </span>

    <div class="link" style="display:none">
     <ul>

  <li> <a href=”http://www.cloudhudl.com”>Home</a> </li>
  <li><a href=”http://www.cloudhudl.com/about-us”>About Us</a></li>
  <li><a href=http://www.cloudhudl.com/contact-us>Contact Us</a></li>
</ul>
    </div>
</div>
    <section id="main">
        <p>Have questions about what exactly Cloud Hudl is? How to get involved or what we hope to change about the industry? 
        Or something completely unrelated? Fill out the form below and we'll get back with you ASAP! A real person will reach
         out within one business day (Really!).</p>
</section>

    <section id="info">
        <p>Email: [email protected]</p>
        <p>Phone: (620) 605-2154</p>
<!-- Social media BUT REPLACE PICTURES!! -->
    <a target="_blank" title="follow us on Facebook" href="http://www.facebook.com/CloudHudl"><img alt="follow us on Facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/facebook40x40.png" border="0"></a>
    <a target="_blank" title="follow us on Linkedin" href="https://www.linkedin.com/company/cloud-hudl"><img alt="Follow us on Linkedin" src="linkedin.png" border="0"></a>
    <a target="_blank" title="Follow us on Twitter" href="https://www.twitter.com/cloudhudl"><img alt="Follow us on Twitter" src="twitter.png" border="0"></a>   

    </section>

    <form action="confirmation.htm" method="post" class="basic-grey">
        <div id="form">
    <span>Your Name :</span>
        <input id="name" type="text" name="name" placeholder="Your Full Name" />
    </label>

    <label>
        <span>Your Email :</span>
        <input id="email" type="email" name="email" placeholder="Valid Email Address" />
    </label>

    <label>
        <span>Message :</span>
        <textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
    </label> 
     <label>
        <span>&nbsp;</span> 
        <input type="submit" class="button" value="Send" /> 
    </label>    
</div>
</form>

    <footer>
        <address>
            Copyright 2015 &#169;
            (620) 605-2154
        </address>
    </footer>

</body>
</html>

The arrow below the logo will be off-centered when the width of the viewport is below 480px due to the class .block having a fixed width of 480px, removing the width from .block will solve that.

Upvotes: 0

Claerys Sacal

Reputation: 11

You can remove the div wrapper and, instead, you can add a class to your img tag.

Solution:

.center { margin: 0 auto; display: block; }

<html>
    <head><title></title></head>
    <body>
        <header>
            <a href="">
                <img class="center" src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/256/teddy-bear-icon.png" width="40%"/>
            </a>
        </header>
    </body>
</html>

Upvotes: 1

Salem Ouerdani

Reputation: 7896

here is the issue :

a {
    display: block;
    width: 80px;
    color:red;
}

close the div tag and remove display: block; from the global css link tag :

a {
    /*display: block;*/
    width: 80px;
    color:red;
}

.img {
    text-align: center;
}

img {
    display: block;
    margin: auto;
    text-align: center;
}
ul {
    list-style-type: none;

    margin: 0;
    padding: 0;
}

.link{
    padding-bottom: 50px; 

}
a {
    /*display: block;*/
    width: 80px;
    color:red;
}

li {
     float: left;
    display: inline;
}
body{



}
h1{
    font-size: 60px;
    margin: 30px 10px 10px;
    color: #fff;
    font-weight: 300;
}
p{
    font-size:18px;
    margin-bottom:60px;
    color: #ddd;
}
b{
    font-weight: 400;
    color: #fff;
}
/* we use a block as example */
.block{
    width: 480px;
    padding: 10px;

    text-align: center;
    margin: 25px auto;
    border-radius: 5px;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    transition: all .7s ease;
}

.block.active{
    padding-bottom: 0px;
}
.collapse-arrow{
    display: inline-block;
    width: 43px;
    height: 16px;
    position: relative;
    margin: 20px auto 10px;

    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    transition: all .6s ease;
}

.collapse-arrow .one, .collapse-arrow .two{
    display: inline-block;
    position: absolute;
    height: 5px;
    width: 26px;
    top: 6px;
    background: #000;
    border-radius: 10px;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    transition: all .6s ease;
    -webkit-transition-delay: .6s;
    -moz-transition-delay: .6s;
    transition-delay: 1s;
}

.collapse-arrow .one{
    left: -1px;
    transform: rotate(32deg)
}
.collapse-arrow .two{
    right: -1px;
    transform: rotate(-32deg)
}

.active .collapse-arrow .one{transform: rotate(-32deg)} 
.active .collapse-arrow .two{transform: rotate(32deg)}

.collapse-arrow.black span{background: #111;}

//Form styles
/* Basic Grey */
#form {
postion: relative;
}
.basic-grey {
    position:absolute;
    top:55%;
    right:0;
    left:50%;
    width: 45%;
    background: #F7F7F7;
    padding: 25px 15px 25px 10px;
    font: 12px Georgia, "Times New Roman", Times, serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #E4E4E4;
}
.basic-grey label {
    display: block;
    margin: 0px;
}
.basic-grey label>span {
    float: left;
    width: 20%;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea {
    border: 1px solid #DADADA;
    color: #888;
    height: 30px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 3px 3px 3px 5px;
    width: 70%;
    font-size: 12px;
    line-height:15px;
    box-shadow: inset 0px 1px 4px #ECECEC;
    -moz-box-shadow: inset 0px 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
    padding: 5px 3px 3px 5px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey .button {
    background: #E27575;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #FFF;
    box-shadow: 1px 1px 5px #B6B6B6;
    border-radius: 3px;
    text-shadow: 1px 1px 1px #9E3F3F;
    cursor: pointer;
}
.basic-grey .button:hover {
    background: #CF7A7A
}

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$( ".block" ).on( "click", function() {
  $(this).toggleClass( "active" );
    $(".link").toggle();
});
});
</script>
<meta charset="utf-8">
<title>Contact Us</title>
<link href="contact_us.css" rel="stylesheet" type="text/css">
</head>

<header>
            <div class="img"><a class="img" href="http://www.cloudhudl.com" alt="Cloud Hudl"><img src="white_logo.png" alt="Cloud Hudl"/></a></div>
</header>
<div class="block">

    <span class="collapse-arrow">
    <span class="two"></span>
    <span class="one"></span>

     </span>

    <div class="link" style="display:none">
     <ul>

  <li> <a href=”http://www.cloudhudl.com”>Home</a> </li>
  <li><a href=”http://www.cloudhudl.com/about-us”>About Us</a></li>
  <li><a href=http://www.cloudhudl.com/contact-us>Contact Us</a></li>
</ul>
    </div>
</div>
    <section id="main">
        <p>Have questions about what exactly Cloud Hudl is? How to get involved or what we hope to change about the industry? 
        Or something completely unrelated? Fill out the form below and we'll get back with you ASAP! A real person will reach
         out within one business day (Really!).</p>
</section>

    <section id="info">
        <p>Email: [email protected]</p>
        <p>Phone: (620) 605-2154</p>
<!-- Social media BUT REPLACE PICTURES!! -->
    <a target="_blank" title="follow us on Facebook" href="http://www.facebook.com/CloudHudl"><img alt="follow us on Facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/facebook40x40.png" border="0"></a>
    <a target="_blank" title="follow us on Linkedin" href="https://www.linkedin.com/company/cloud-hudl"><img alt="Follow us on Linkedin" src="linkedin.png" border="0"></a>
    <a target="_blank" title="Follow us on Twitter" href="https://www.twitter.com/cloudhudl"><img alt=Follow us on Twitter" src="twitter.png" border="0"></a>   

    </section>

    <form action="confirmation.htm" method="post" class="basic-grey">
        <div id="form">
    <span>Your Name :</span>
        <input id="name" type="text" name="name" placeholder="Your Full Name" />
    </label>

    <label>
        <span>Your Email :</span>
        <input id="email" type="email" name="email" placeholder="Valid Email Address" />
    </label>

    <label>
        <span>Message :</span>
        <textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
    </label> 
     <label>
        <span>&nbsp;</span> 
        <input type="submit" class="button" value="Send" /> 
    </label>    
</div>
</form>

    <footer>
        <address>
            Copyright 2015 &#169;
            (620) 605-2154
        </address>
    </footer>

</body>
</html>

Upvotes: 0

Theo Shu

Reputation: 26

You need to remove display: block from a and img.

img {
    /* display: block; */
    /* margin: auto; */
    text-align: center;
}
a {
    /* display: block; */
    /* width: 80px; */
    color:red;
}

Upvotes: 0

hemnath mouli

Reputation: 2755

<div class="img"<a href="http://www.cloudhudl.com" alt="Cloud Hudl"><img src="white_logo.png" alt="Cloud Hudl"/></a></div>

<div class="img"> <a href="http://www.cloudhudl.com" alt="Cloud Hudl"><img src="white_logo.png" alt="Cloud Hudl"/></a></div>

Upvotes: 0

alyssums

Reputation: 139

You're missing the closing > after <div class="img". Should be <div class="img">

Upvotes: 0

Centering an image in the header

Answers (6)

Related Questions