Question

我有一个奇怪的问题，文本和图像没有与中心对齐，我一直在从头开始编码这个网站，当我在计算机上测试它时效果非常好，但是当我尝试它时电话不起作用。这些是图片（来自电脑和手机）

--------- COMPUTER Computer's resized Firefox windows 1

--------- PHONE Phone's screenshot 1 - Chrome

这是我的代码，我一直在使用bootstrap和普通的HTML，CSS和基本的PHP和JavaScript

<nav class="navbar navbar-default nav_menu_head">
<div class="container-fluid">
<div class="row">
    <nav class="navbar navbar-default nav_menu_head">
  <div class="container-fluid">
<div class="row">
   <div class="navbar-header">

      <div class="col-md-6 col-xs-10">
       <a href="index.php" class="navbar-brand" rel="home">
        <img class="img-responsive logo" src="img/logo2.png"></a>

      </div>
      <div class="col-xs-2">
  <button type="button" class="navbar-toggle navbar_colapse" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
     </div>


      <div class="collapse navbar-collapse col-md-6 text-justify-xs" id="myNavbar">
     <ul class="nav navbar-nav navbar-right nav_menu_head" >
  <li ><a href="index.php#empresa" >EMPRESA</a></li>
  <li ><a href="productos.php">PRODUCTO</a></li>
  <li><a href="index.php#contacto">CONTACTO</a></li>
<!--  <li ><a href="#">SOPORTE TÉCNICO</a></li -->
</ul>
</div>     
</div>
 </nav>

这是CSS

.text_box{width: 100%; 
height: 200px;}
.navbar-header{float: none;}

.text-justify-xs {
text-align: center;
}

.img-responsive.menu_image{margin: 0 auto;}
.collapse.navbar-collapse.col-md-6.text-justify-xs {border-width: 0px;}

Answer 1

这看起来像SparseTriangularView上的display属性值不匹配。浏览器具有不同的默认值并不罕见。尝试在ul上设置display: block。

Answer 2

尝试：

.text-justify-xs ul li a {
    text-align: center;
}

在你的CSS中

文字不会在电话中心

2 个答案: