Question

我在排除“＃34;获取更新权利到您的收件箱”时遇到了一些麻烦！＆＃34;带有电子邮件提交表单的文本。它应该位于背景图像的底部，但我只能通过调整边距来实现它。另外，正如您可能看到的那样，＆＃34;阅读更多＆＃34;和＃34;获得门票＆＃34;按钮应该居中。我尝试过text-align：center，但这似乎并没有做任何事情。另外，有没有办法减少列的大小？我非常感谢你的帮助！这是代码：

HTML

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

CSS

ApplicationController

Answer 1

您可以使用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>

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

1 个答案: