gpt4 book ai didi

html - 在 twitter bootstrap 页脚中居中三个 div

转载 作者:行者123 更新时间:2023-11-28 12:43:51 25 4
gpt4 key购买 nike

我是新手,我试图将 Bootstrap 页脚中的三个 div 居中,但它们似乎居中于左侧。我将离开 Twitter Bootstrap 框架并仍在学习绳索,所以如果我遗漏了什么,请告诉我。谢谢!

HTML

<footer>
<div class="footer">
<div class="container narrow row-fluid">

<div class="span3">
<h3>Contact Us!</h3>
<p>Have a question or comment? We can help you!</p>
<br>by phone: 555-555-5555
<br>by mail: info@website.com
<br>or by our: <a href="contact.htm">Contact Page</a>
</div>


<div class="span3">
<a class="brand" href="index.htm"><img src="images/logo.png" alt="South Shore Bicycle and Fitness" align="middle"> </a>
</div>

<div class="span3">
<h3>Newsletter</h3>
<p>Subscribe to our newsletter and get the latest news!</p>
<form action="php/mail.php" id="subscribe-form" method="post">
<input type="text" name="email" id="email" placeholder="Your Email Address">
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>

</div>
</div>
</footer>

CSS

.modal-footer { padding: 14px 15px 15px;
margin-bottom: 0;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
*zoom: 1;
vertical-align: middle;
}

.modal-footer:before, .modal-footer:after {
display: table;
content: "";
vertical-align: middle
}

.modal-footer:after {
clear: both;
vertical-align: middle
}

.modal-footer .btn {
float: right;
margin-left: 5px;
margin-bottom: 0;
vertical-align: middle
}

.span3 {
width: 166px;
}

最佳答案

你可以使用 margin: 0 auto;居中元素。尝试将此规则添加到您的 CSS:

.span3{
margin: 0 auto
}

然后,还给其中一个包含 span3 的 div 设置一个宽度:

.container{
width: 515px /* The actual width may need to be higher or lower than this */
}

关于html - 在 twitter bootstrap 页脚中居中三个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17517049/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com