Question

我在尝试将和

居中时被卡住，我尝试了text-align margin：0自动; ，，，我认为这与拥有身体{margin：0}有关附注：只是练习尝试复制模板

<!DOCTYPE html>
<html>
    <head>
        <title>Acme Web Design Home</title>
        <style>
            header h1{
                 margin-top: 50px; float:left; padding:20px 0 20px 20px;
                 font-size:40px;
                 }
            header {background-color:#35424a;border-bottom:orange solid 5px;color: white;
            height:150px;width: 100%;color:white;}
            ul   {float: right;}
            body {margin:0}
            ul li {display: inline-block;padding: 30px;font-size:30px;margin:35px 0px 80px 0px;}
            header a {text-decoration:none;color:white}
            .container  {margin:auto; width: 90%;}
            .showcase{margin: 0 auto;width:90%;text-align: center;}
        </style>
    </head>
    <header>
        <div class="container">
            <nav>
          <h1 id="Logo">Acme Web Design</h1>
          
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="About.html">About</a></li>
                <li><a href="Services.html">Services</a></li>
            </ul>             
            </nav>
        </div>
    </header>
    <body>
        <div class="Showcase">
            <h1>Affordable Professional Web Design</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.
           </p>
        </div>
        <div class="SubForm">
            <h2>Subscribe to our News letter</h2>
            <form>
                <input type="email" placeholder="Enter your Email..">
                <button type="button">Subscribe</button>
            </form>
        </div>
    </body>
</html>

Answer 1

在花了一些时间之后，我使用了检查器工具，发现我的文字环绕在的浮动内容上，这就是为什么文字似乎不在页面中间的原因，不得不重写所有做得不好的事情：/

Answer 2

您应该尝试以下操作：

.showcase{
  margin: 0 auto;
  width:90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Answer 3

嗯，居中元素可以用两种方法来完成（嗯，还有更多）。您可以使用<center>标签或使用CSS：

<style>
.showcase {
width: 100%;
height: auto;
min-height: 300px;
padding-left: 30%;
padding-right: 30%;
padding-top: 30%;
padding-bottom: 30%; /* Change this to suit you :) */
}
</style>
<div class="showcase">
<p> Content </p>
</div>

使用padding: /* % */将元素移动到节中

祝您的项目好运：）

祝你有美好的一天

如何在div容器中居中放置元素

3 个答案: