无法在DIV /对齐文本和电子邮件提交表单中居中按钮

问题描述 投票：-1回答：1

enter image description here

排队“将更新直接发送到您的收件箱”我遇到了一些麻烦！带有电子邮件提交表单的文本。它应该位于背景图像的底部，但我只能通过调整边距来实现它。另外，正如您可能看到的那样，“Read More”和“Get Tickets”按钮应该居中。我尝试过text-align：center，但这似乎没有做任何事情。另外，有没有办法减少列的大小？我非常感谢你的帮助！这是代码：

HTML

<!DOCTYPE html>


<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="indyfolk.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet"> 
<script src=""></script> 
<title>Indy Folk News</title>
</head>

<body>

<div class="topnav">
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="search" name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
  <a class="active" href="#about">ABOUT</a>
  <a href="#news">NEWS</a>
  <a href="#events">EVENTS</a>
  <a href="#contact">CONTACT</a>

</div>

<div class="banner">
    <p>Providing News of Indy Folk Music,
    <br>
    Folk Art, Storytelling & Cultural News
    <br>
    to the Community
    </p>
    <button class="button button1">LEARN MORE</button> <button class="button button2">SEE EVENTS</button>
    <div class="bottomhdr">
        <div class="bottomtxt">
            <p>GET UPDATES RIGHT TO YOUR INBOX</p> 
        </div>
        <div class="email">
            <form action="/action_page.php">
                <input type="text" placeholder="enter your email address" name="search">
                <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </div>  
</div>
<br>
<div class="row">
  <h1>Recent Posts</h1>
  <div class="column"style="background-color:#D5D6D6;">
    <img src="folkband.png">
    <p><b>News Post Title</b></p>
    <p><b>Posted by:</b> Poster Name</p>
    <p><b>Date:</b> January 8, 2018</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
    <button class="button button3">READ MORE</button>       
  </div>
  <div class="column"style="background-color:#D5D6D6;">
    <img src="folkband.png">
    <p><b>News Post Title</b></p>
    <p><b>Posted by:</b> Poster Name</p>
    <p><b>Date:</b> January 8, 2018</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
    <button class="button button3">READ MORE</button>   
  </div>
  <div class="column"style="background-color:#D5D6D6;">
    <img src="folkband.png">
    <p><b>News Post Title</b></p>
    <p><b>Posted by:</b> Poster Name</p>
    <p><b>Date:</b> January 8, 2018</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
    <button class="button button3">READ MORE</button>   
  </div>
  <div class="column"style="background-color:#D5D6D6;">
    <img src="folkband.png">
    <p><b>News Post Title</b></p>
    <p><b>Posted by:</b> Poster Name</p>
    <p><b>Date:</b> January 8, 2018</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
    <button class="button button3">READ MORE</button>   
  </div>
</div> 

<div class="row">
  <div class="column" style="background-color:#ccc;"></div>
  <div class="column" style="background-color:#ccc;"></div>
  <div class="column"style="background-color:#ccc;"></div>
  <div class="column"style="background-color:#ccc;"></div>
</div> 

<br>

<div class="link">
    <a href="" target="_blank">SEE ALL NEWS POSTS ></a>
</div>

<br> 
<hr>
<br>

<div class="row1">
  <h1>Upcoming Events</h1>
  <div class="column"style="background-color:#D5D6D6;">
    <img src="folkband.png">
    <p><b>Band Name</b></p>
    <p><b>Date:</b> January 8, 2018</p>
    <p><b>Location:</b> White Rabbit</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
    <button class="button button4">GET TICKETS</button>     
  </div>
  <div class="column"style="background-color:#D5D6D6;">
    <img src="folkband.png">
    <p><b>Band Name</b></p>
    <p><b>Date:</b> January 8, 2018</p>
    <p><b>Location:</b> White Rabbit</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
    <button class="button button4">GET TICKETS</button>     
  </div>
  <div class="column"style="background-color:#D5D6D6;">
    <img src="folkband.png">
    <p><b>Band Name</b></p>
    <p><b>Date:</b> January 8, 2018</p>
    <p><b>Location:</b> White Rabbit</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
    <button class="button button4">GET TICKETS</button>     
  </div>
  <div class="column"style="background-color:#D5D6D6;">
    <img src="folkband.png">
    <p><b>Band Name</b></p>
    <p><b>Date:</b> January 8, 2018</p>
    <p><b>Location:</b> White Rabbit</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam bibendum urna, eu dignissim nisi laoreet vitae. Morbi sed finibus nisi. Ut maximus, mi at eleifend luctus, nisi nisl fringilla arcu, ut interdum tellus sem vel ex. Sed congue metus et eleifend mollis. Aliquam erat volutpat. Etiam varius libero eget ligula convallis, in tempor orci congue. Vivamus quis enim tempor est pharetra sodales. Etiam ac nunc tempor ex rhoncus pulvinar vel vel quam. Pellentesque consectetur, turpis elementum ornare blandit, erat eros pharetra quam, sit amet tincidunt massa augue sit amet augue.</p>
        <button class="button button4">GET TICKETS</button>     
      </div>
    </div> 

    <br>
    <br>

    <div class="link">
        <a href="" target="_blank">SEE ALL EVENTS ></a>
    </div>


</body>

</html>

CSS

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.topnav {
  overflow: hidden;
  font-family: 'Lato', sans-serif;
  margin-top: 30px;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 6px;
  font-size: 17px;
  border: none;
  background-color: #D7D2D2;
}



.topnav .search-container button {
  background: #5AA797;
  margin-top: 6px;
  color: white;

}

.banner {
  background-image: url('folkband.png');
  background-position: center;
  background-size: cover;
  height: calc(100% - 96px);
}

.banner p {
  font-family: 'Lato', sans-serif;
  font-size: 42px;
  color: white;
  padding-left: 60px;
  padding-top: 140px;
}

.button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 0px;
  cursor: pointer;
  padding: 4px 30px;
}

.button1 {
  margin-left: 60px;
  background-color: #E4631D;
}

.button2 {
  background-color: #F2CB54;
}

.bottomtxt {
  width: 50%;
  float: left;
}
.bottomtxt p {
  font-size: 18px;
  background-color: #24664D;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 153px;
}

.email {
  float: right;
  background-color: #24664D;
  margin-top: 153px;
  padding-top: 20px;
  padding-bottom: 21px;
  padding-left: 386px;
  padding-right: 16px;
}


.email input[type=text] {
  font-size: 14px;
  border: none;
}

.column {
    float: left;
    width: 24%;
    margin: 8px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column img {
    width: 100%;
    background-size: cover; 
}

.row h1 {
    font-size: 25px;
    text-align: center;
    color: #E4631D;
}

.button3 {
  background-color: #E4631D;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  padding: 4px 30px;
}

.link {

    text-align: center;

}

a:link {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

}
a:visited {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

.row1 h1 {
    font-size: 25px;
    text-align: center;
    color: #F2CB54;
}

.button4 {
  background-color: #F2CB54;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  padding: 4px 30px;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 50px;
    margin-right: 50px;
    border-style: inset;
    border-width: .25px;
}
html css
1个回答
0
投票

你可以使用flexbox轻松完成。检查下面的代码段并尝试更多，直到找到需要的解决方案。

.bottomhdr{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
<div class="bottomhdr">
        <div class="bottomtxt">
            <p>GET UPDATES RIGHT TO YOUR INBOX</p> 
        </div>
        <div class="email">
            <form action="/action_page.php">
                <input type="text" placeholder="enter your email address" name="search">
                <button type="submit"><i class="fa fa-search"></i>Search</button>
            </form>
        </div>
    </div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.