个人中心
gpt4 book ai didi

css - 在标题中居中图像

转载 作者：太空宇宙 更新时间：2023-11-04 11:16:18 27 4
gpt4 key购买 nike

这真的很奇怪。我有一个 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
}

最佳答案

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

解决方法:

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

关于css - 在标题中居中图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33177676/

27 4 0
文章推荐： java - 将 HTML 代码添加到列表中
文章推荐： linux - linux 将在 eth0 和 eth0.1 之间使用哪个接口(interface)？
文章推荐： Python 检查数组的 dtype - float 或 complex
文章推荐： java - Spring mvc - 将 xml 文本字符串发送到 Controller
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com