文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何向左添加使html移动一点

问如何向左添加使html移动一点
EN

Stack Overflow用户
提问于 2020-10-15 10:48:34
回答 3查看 220关注 0票数 0

我有这个密码，但看起来很奇怪。

作者和日期被稍微移到左边，我想把它们放在中间。

用这个元素对它们进行居中，但我没有运气。

代码语言：javascript
复制
style="text-align: center;"

我能做什么?

​

代码语言：javascript
复制
<base href="https://acanhs.org/" />

<style>
  img.article {
    float: left;
    width: 300px;
    height: 300px;
    object-fit: cover;
  }
  
  a:link {
    color: Black;
    background-color: transparent;
    text-decoration: none;
  }
  
  a:visited {
    color: Black;
    background-color: transparent;
    text-decoration: none;
  }
  
  a:hover {
    color: Black;
    background-color: transparent;
    text-decoration: none;
  }
  
  a:active {
    color: Black;
    background-color: transparent;
    text-decoration: none;
  }
</style>
<link rel="stylesheet" href="bootstrap.min.css" />
<style>
  .btn {
    width: 150px;
    height: 150px;
    background: #ddd;
    position: relative;
    text-align: center;
    margin: 15px;
    overflow: hidden;
    border-radius: 100%;
    display: inline-block;
  }
  
  .btn.download {
    background: #00CCFF;
  }
  
  .btn.download .cloud {
    box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
  }
  
  .btn.download .arrow {
    -webkit-animation: download 1s linear infinite;
    animation: download 1s linear infinite;
  }
  
  .btn.upload {
    background: #F49845;
  }
  
  .btn.upload .cloud {
    box-shadow: 0px 0px #f17d15, 1px 1px #f17d15, 2px 2px #f17d15, 3px 3px #f17d15, 4px 4px #f17d15, 5px 5px #f17d15, 6px 6px #f17d15, 7px 7px #f17d15, 8px 8px #f17d15, 9px 9px #f17d15, 10px 10px #f17d15, 11px 11px #f17d15, 12px 12px #f17d15, 13px 13px #f17d15, 14px 14px #f17d15, 15px 15px #f17d15, 16px 16px #f17d15, 17px 17px #f17d15, 18px 18px #f17d15, 19px 19px #f17d15, 20px 20px #f17d15, 21px 21px #f17d15, 22px 22px #f17d15, 23px 23px #f17d15, 24px 24px #f17d15, 25px 25px #f17d15, 26px 26px #f17d15, 27px 27px #f17d15, 28px 28px #f17d15, 29px 29px #f17d15, 30px 30px #f17d15, 31px 31px #f17d15, 32px 32px #f17d15, 33px 33px #f17d15, 34px 34px #f17d15, 35px 35px #f17d15, 36px 36px #f17d15, 37px 37px #f17d15, 38px 38px #f17d15, 39px 39px #f17d15, 40px 40px #f17d15, 41px 41px #f17d15, 42px 42px #f17d15, 43px 43px #f17d15, 44px 44px #f17d15, 45px 45px #f17d15, 46px 46px #f17d15, 47px 47px #f17d15, 48px 48px #f17d15, 49px 49px #f17d15, 50px 50px #f17d15;
  }
  
  .btn.upload .arrow {
    -webkit-animation: uplaod 1s linear infinite;
    animation: uplaod 1s linear infinite;
  }
  
  .btn.upload .arrow:after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #97CA03 transparent;
  }
  
  .cloud {
    width: 100px;
    height: 40px;
    position: relative;
    background: #fff;
    display: inline-block;
    border-radius: 50px;
    margin: 60px auto 0;
    box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
  }
  
  .cloud:after,
  .cloud:before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    top: -20px;
    background: #fff;
    left: 5px;
  }
  
  .cloud:before {
    width: 40px;
    height: 40px;
    left: 50px;
  }
  
  .arrow {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 5;
    top: 10px;
    width: 15px;
    height: 10px;
    background: #97CA03;
    display: inline-block;
  }
  
  .arrow:after {
    content: '';
    position: absolute;
    left: -8px;
    top: 100%;
    border: 15px solid transparent;
    border-top-color: #97CA03;
  }
  
  @-webkit-keyframes download {
    0% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
    }
    100% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      opacity: 0;
    }
  }
  
  @keyframes download {
    0% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
    }
    100% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      opacity: 0;
    }
  }
  
  @-webkit-keyframes uplaod {
    0% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
    }
    100% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      opacity: 0;
    }
  }
  
  @keyframes uplaod {
    0% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
    }
    100% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      opacity: 0;
    }
  }
</style>


<link rel="stylesheet" href="templatemo-stand-blog.css">

<img src="logo.png" width="100" height="100" alt="HTML tag">
<p class="bluebackground">&emsp;</p>
<nav>
  <ul class="nav">
    <li class="navlist"><a class="active" href="index.html">Home</a></li>
    <li class="navlist"><a class="active" href="boyshome.html">Boys Campus</a></li>
    <li class="navlist"><a class="active" href="girlshome.html">Girls Campus</a></li>
    <li class="navlist"><a class="active" href="calculator.html">GPA Calculator</a></li>
  </ul>
</nav>
<p class="bluebackground">&emsp;</p>
<br>
<h1 class="girls-message centermess">
  <center>NHS BOYS</center>
</h1>
<nav>
  <p class="bluebackground">&emsp;</p>
  <ul class="nav">
    <li class="navlist"><a class="active" href="boyshome.html">Home</a></li>
    <li class="navlist"><a class="active" href="nhs-articles.html">NHS Articles</a></li>
    <li class="navlist"><a class="active" href="meet-our-officers-boys.html">Meet Our Officers</a></li>
    <li class="navlist"><a class="active" href="boyscontact.html">Contact Us</a></li>
  </ul>
</nav>
<p class="bluebackground">&emsp;</p>
<br>
<br>
<h1 style="text-align: center;">NHS ARTICLES</h1>

<center>
  <section class="blog-posts grid-system">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="all-blog-posts">
            <center>
              <div class="row">
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Fitness.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>Fitness</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Mohammad Al-Wazzan</li>
                        <br>
                        <li style="text-align: center;">Wednesday, November 3, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Fitness.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الأمير.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>الأمير الراحل … أمير الإنسانية</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Mohammad Al-Mutair</li>
                        <br>
                        <li style="text-align: center;">Saturday, October 3, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الأمير الراحل … أمير الإنسانية.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Uyghur.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>Uyghur Muslims</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Khalid Kooheji</li>
                        <br>
                        <li style="text-align: center;">Sunday, September 27, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Uyghur Muslims.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Corona.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>Corona Virus: A New World</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Majed Al-Shaheen</li>
                        <br>
                        <li style="text-align: center;">Sunday, September 27, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Corona Virus A New World.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/اقرأ.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>التعلم عبادة</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Omar Sheir</li>
                        <br>
                        <li style="text-align: center;">Wednesday, September 23, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/التعلم عبادة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الصدقة.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>الصدقة</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Ahmad Al-Mazrouei</li>
                        <br>
                        <li style="text-align: center;">Sunday, September 20, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الصدقة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>

​

javascript
html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-10-15 10:53:16

您的带有类post信息的<ul>在左边似乎有一个default-padding。只需将padding-left: 0;添加到该类即可。

票数 1
EN

Stack Overflow用户

发布于 2020-10-15 10:58:48

您的ul元素正在实现默认的左填充40 is，从而导致偏移量。

只需在post-info类中添加一个样式即可移除以下内容：

代码语言：javascript
复制
ul.post-info {
    padding-left: 0;
}

这篇这样的文章描述了ul：Does UL have default margin or padding上默认填充的相同问题

票数 0
EN

Stack Overflow用户

发布于 2020-10-15 11:22:52

我检查了您的代码，您希望这个div位于中间，所以我建议您在列div旁边再添加两个div。它会在中间。

代码语言：javascript
复制
<div class=col-lg-2></div>
<div class=col-lg-4></div>
<div class=col-lg-4></div>
<div class=col-lg-2></div>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64369919

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档