我正在使用 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>
最佳答案
您的代码的简单修复方法是将 text-center
类添加到所有 col-xs-*
类。这将使 col-xs-*
包装器内的内部图像和文本居中。请注意,我添加了一些背景颜色以帮助可视化效果。
<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>
关于html - Bootstrap 3 : How to precisely center text under a circular image?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54989292/