代码之家  ›  专栏  ›  技术社区  ›  Lynob

引导3:如何精确地将文本居中放置在圆形图像下?

  •  0
  • Lynob  · 技术社区  · 6 年前

    我使用的是bootstrap 3,文本在圆形图像下没有完全对齐,这在不同的屏幕、bootstrap模式和不同的语言中更明显,我不想开始添加 margin-left 因为如果我那样做,我在某些屏幕上会出错。有更好的办法吗?

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      
      <div class="container">
      <div class="row">
      <div class="col-xs-3">
        <div class="row">
          <img src="https://i.imgur.com/ABwB1YD.png" alt="">
        </div>
        <div class="row">
          <span class="country text-center"> Arabic </span>
        </div>
        </div>  
        
          <div class="col-xs-3">
        <div class="row">
          <img src="https://i.imgur.com/ABwB1YD.png" alt="">
        </div>
        <div class="row">
          <span class="country text-center"> Dari </span>
        </div>
        </div> 
        
          <div class="col-xs-3">
        <div class="row">
          <img src="https://i.imgur.com/ABwB1YD.png" alt="">
        </div>
        <div class="row">
          <span class="country text-center"> Pashto </span>
        </div>
        </div>  
        
          <div class="col-xs-3">
        <div class="row">
          <img src="https://i.imgur.com/ABwB1YD.png" alt="">
        </div>
        <div class="row">
          <span class="country text-center"> Kurdish </span>
        </div>
        </div>  
        
      </div>
      
      <div class="row">
          <div class="col-xs-3">
        <div class="row">
          <img src="https://i.imgur.com/ABwB1YD.png" alt="">
        </div>
        <div class="row">
          <span class="country text-center"> Farsi </span>
        </div>
        </div>  
        
          <div class="col-xs-3">
        <div class="row">
          <img src="https://i.imgur.com/ABwB1YD.png" alt="">
        </div>
        <div class="row">
          <span class="country text-center"> Tigrinya </span>
        </div>
        </div>  
        
          <div class="col-xs-3">
        <div class="row">
          <img src="https://i.imgur.com/ABwB1YD.png" alt="">
        </div>
        <div class="row">
          <span class="country text-center"> Amharic </span>
        </div>
        </div>  
        
          <div class="col-xs-3">
        <div class="row">
          <img src="https://i.imgur.com/ABwB1YD.png" alt="">
        </div>
        <div class="row">
          <span class="country text-center"> English </span>
        </div>
        </div>  
      </div>
      
    </div>
    1 回复  |  直到 6 年前
        1
  •  1
  •   brooksrelyt Ozal Zarbaliyev    6 年前

    可以添加自定义类 .center 到你的最外层 .container div . 这将使用 text-align: center; .

    .center {
      text-align: center;
    }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    
    <div class="container center">
      <div class="row">
        <div class="col-xs-3">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Arabic </span>
          </div>
        </div>
    
        <div class="col-xs-3">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Dari </span>
          </div>
        </div>
    
        <div class="col-xs-3">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Pashto </span>
          </div>
        </div>
    
        <div class="col-xs-3">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Kurdish </span>
          </div>
        </div>
    
      </div>
    
      <div class="row">
        <div class="col-xs-3">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Farsi </span>
          </div>
        </div>
    
        <div class="col-xs-3">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Tigrinya </span>
          </div>
        </div>
    
        <div class="col-xs-3">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Amharic </span>
          </div>
        </div>
    
        <div class="col-xs-3">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> English </span>
          </div>
        </div>
      </div>
    
    </div>
        2
  •  2
  •   Shidersz    6 年前

    对代码的简单修复就是添加 text-center 类到所有 col-xs-* 类。将内部图像和文本居中 COX-X-* 包装纸。注意,我添加了一些背景色,以帮助可视化效果。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      
    <div class="container">
      <div class="row">
        <div class="col-xs-3 text-center bg-info">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Arabic </span>
          </div>
        </div>  
        
        <div class="col-xs-3 text-center bg-warning">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Dari </span>
          </div>
        </div> 
        
        <div class="col-xs-3 text-center bg-info">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Pashto </span>
          </div>
        </div>  
        
        <div class="col-xs-3 text-center bg-warning">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Kurdish </span>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-xs-3 text-center bg-warning">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Farsi </span>
          </div>
        </div>  
        
        <div class="col-xs-3 text-center bg-info">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Tigrinya </span>
          </div>
        </div>  
        
        <div class="col-xs-3 text-center bg-warning">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> Amharic </span>
          </div>
        </div>  
        
        <div class="col-xs-3 text-center bg-info">
          <div class="row">
            <img src="https://i.imgur.com/ABwB1YD.png" alt="">
          </div>
          <div class="row">
            <span class="country text-center"> English </span>
          </div>
        </div>  
      </div>
      
    </div>
        3
  •  0
  •   Thor    6 年前

    只能使用一行,然后将图像和文本居中。

    <div class="col-xs-3">
        <div class="row text-center">
                <img src="https://i.imgur.com/ABwB1YD.png" alt="">
                <br>
                <span class="country text-center"> Arabic </span>
        </div>
    </div>
    

    更新:您仍然可以使用列…我把它们添加到了你的示例的简短版本中

        4
  •  0
  •   Malik    6 年前

    柔性箱 CSS

    display : flex;
    justify-content : center;
    align-items : center