HTML/CSS 对齐 div 中的多个元素

标签 html css

我想知道如何在一个 div 中对齐三个元素。基本上,它应该是这样的 enter image description here

已解决。
对于 future 的读者,我的问题的解决方案如下所示

<div style="text-align: center;">
  <span style="float: left;">LEFT</span>
  <span style="margin: auto;">CENTER</span>
  <span style="float: right;">RIGHT</span>  
</div>


最佳答案

.container{
  display: flex; // working with all latest browsers
  display: -webkit-flex;  // for old version of safari
  display: -ms-flex; // for old versions of IE
  justify-content: space-between;
}
.container span{
  flex: 1;
  text-align: center;
}
<div class="container">
  <span>LEFT</span>
  <span>CENTER</span>
  <span>RIGHT</span>  
</div>

如果您要在 container 中添加更多数据,那最好不过了。它将给出相等的间距。内联样式不是更好的选择

Demo这里

关于HTML/CSS 对齐 div 中的多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38695522/

相关文章:

android - 下拉菜单在移动设备上不起作用

html - Bootstrap 垂直对齐图像

html - 圆形台阶指示器台阶名称位置

css - 顶部背景图片(使用 CSS)

javascript - Soundcloud iframe 小部件定制

jquery - 在我的案例中如何替换背景图片?

javascript - 正则表达式帮助替换 <html> 标签

javascript - HTML 输入类型 number 在具有 ., 值时不返回值

javascript - 将图像保存到本地存储 - Canvas

javascript - 在 Chrome Devtools 中检测和观察对样式表所做的更改