Question

我的页脚中有页面链接，它们在大屏幕中左对齐。我想在超小屏幕中居中对齐它们。左侧对齐在超小屏幕中显得凌乱。我希望将它们对齐，就像我已经包含的图片一样。这是我的jsfiddle

这是我试过的

.footer-link{
margin: 20px 0;
margin-left: 15px;
}

.footer-link>ul>li{
margin: 10px 4.2% 10px 0%;
font-family: gotham_book;
font-weight: bold;
color: #424242;
font-size: 14px;
text-decoration: none;
text-align: left;
}

我试图将它对齐中心。但它不起作用。我如何像我在图片中显示的那样居中。

<div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero">

     <ul class="footer-links list-inline">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Terms of Use</a></li>
        <li><a href="#">Disclosures</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      </div>

Answer 1

变化..

$message->addTo(array('john@example.com','jane@example.com'));

}

补充此代码

.footer-link>ul>li{
margin: 10px 4.2% 10px 0%;
font-family: gotham_book;
font-weight: bold;
color: #424242;
font-size: 14px;
text-decoration: none;
text-align: left;

Answer 2

将此添加到您的css

<script>
    $('#yourdropdownid').find('option:selected').text();
</script>

Answer 3

只需将其添加到您的css代码中即可。

.list-inline{ margin: 0 auto; display:table; }

这将使元素集中于响应

.footer-link{
	margin: 20px 0;
	margin-left: 15px;
}

.footer-link>ul>li{
	margin: 10px 4.2% 10px 0%;
	font-family: gotham_book;
	font-weight: bold;
	color: #424242;
	font-size: 14px;
	text-decoration: none;
	text-align: left;
}
.list-inline{
  margin: 0 auto;
  display:table;
}

          <div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero">

              <ul class="footer-links list-inline">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Disclosures</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
          </div>

Answer 4

这样的东西？

ul.footer-links li{
font-family: gotham_book;
font-weight: bold;
color: #424242;
text-decoration: none;
text-align: center;
width: 30%;
padding: 0;
display: inline-block;
}

ul.footer-links li a{
font-size: 14px;
width: 100%;
padding: 0;
}

ul.footer-links {
width: 100%;
}

Answer 5

.footer-link{
	margin: 20px 0;
	margin-left: 15px;
}

.footer-link>ul>li{
	margin: 10px 4.2% 10px 0%;
	font-family: gotham_book;
	font-weight: bold;
	color: #424242;
	font-size: 14px;
	text-decoration: none;
	text-align: left;
}

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero text-center">

              <ul class="footer-links list-inline">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Disclosures</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
          </div>

只需使用文本中心类即可执行所需的操作。尝试一旦它仅影响屏幕宽度，否则它在一行中。

Answer 6

你应该使用媒体查询，这里是一个bootstrap screne sizes媒体查询列表

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

你应该加你CSS

@media (max-width: 320px) {
 .footer-link>ul>li{
    text-align: center;
}
 }
}

这是一个片段

.footer-link{
	margin: 20px 0;
	margin-left: 15px;
}

.footer-link>ul>li{
	margin: 10px 4.2% 10px 0%;
	font-family: gotham_book;
	font-weight: bold;
	color: #424242;
	font-size: 14px;
	text-decoration: none;
	text-align: left;
}
@media (max-width: 320px) {
 .footer-link>ul>li{
	text-align: center;
}
 }
}

          <div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero">

              <ul class="footer-links list-inline">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Disclosures</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
          </div>

Answer 7

仅在text-align: center;标记或 ul类

中添加 .footer-link

.footer-link
{
  margin: 20px 0;
  margin-left: 15px;
  text-align: center;
}

Revised Fiddle

代码段

＆＃13;

.footer-link {
  margin: 20px 0;
  margin-left: 15px;
  text-align: center;
}

.footer-link>ul>li {
  margin: 10px 4.2% 10px 0%;
  font-family: gotham_book;
  font-weight: bold;
  color: #424242;
  font-size: 14px;
  text-decoration: none;
  text-align: left;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class=" col-lg-12 col-sm-12 col-md-12 col-xs-12 footer-link padding-lr-zero">

  <ul class="footer-links list-inline">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Terms of Use</a></li>
    <li><a href="#">Disclosures</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

＆＃13;

Answer 8

你可以使用margin:auto 如果它不起作用，您将不得不使用媒体标记

如何居中对齐div内的列表项？

8 个答案: