将图像置于标题中

时间：2015-10-16 18:52:49

标签： css

这真的很奇怪。我有一个img链接到我的主页，但我不能让它到中心。我终于将它包裹在一个div中并且它居中。但现在我无法将其作为链接点击。如果我关闭了div class =“img”标签，那么它就不会居中，但我可以点击它。在我开始设置表单之前它已经居中，并且不需要包装器。我知道还有其他一些关于以img为中心的问题，但我完全失去了。我尝试了文本对齐标题然后img，但它仍然无法正常工作。 

<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: info@cloudhudl.com</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
}

6 个答案:

答案 0 :(得分：1)

您可以删除div包装器，而是可以在img标签中添加一个类。

解决方案：

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

答案 1 :(得分：0)

在>之后，您错过了结束<div class="img"。应为<div class="img">

答案 2 :(得分：0)

<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>

答案 3 :(得分：0)

<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">

以上是不正确的标记。应正确关闭<div>代码，包括alt属性。像这样：

<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">

这是一个工作的例子

.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: info@cloudhudl.com</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>

当视口的宽度低于480px时，徽标下方的箭头将偏离中心，因为类.block具有固定宽度480px，删除了{{来自width的1}}将解决这个问题。

enter image description here

答案 4 :(得分：0)

这是问题：

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

关闭 div标记并从全局css 链接标记中删除display: block;：

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: info@cloudhudl.com</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>

答案 5 :(得分：0)

您需要从a和img。

中删除display：block 
img {
    /* display: block; */
    /* margin: auto; */
    text-align: center;
}
a {
    /* display: block; */
    /* width: 80px; */
    color:red;
}
相关问题
最新问题