如何在 Jquery Mobile 中对齐居中的两张图片答案

【问题标题】：How to align center two pictures in Jquery Mobile如何在 Jquery Mobile 中对齐居中的两张图片
【发布时间】：2012-07-16 14:46:42
【问题描述】：

在使用 JqueryMobile 时如何对齐两张图片，使它们位于 div 的中心并且远离两侧？ --p--p--

<div class="ui-grid-a" style="margin: 10px;"">
            <div class="ui-block-a" id="pic"   align="center">
                <img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
            </div>
            <div class="ui-block-b">
                <label>&nbsp</label>
            </div>
            <div class="ui-block-c" id="pic"   align="center">
                <img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
            </div>
        </div>

<style>

  div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px 
         text-align:center; background-color: white; margin: 0 auto;}
</style>

第二个问题是，在 div 之间创建间隙的正确方法是什么？我现在使用的是空 div，但我认为可能会有更好的东西？

干杯，萨米人

【问题讨论】：

您的代码有错误：id 必须是 unique！请改用 pic 作为类，不要使用 align=center 作为属性。

标签： javascript jquery-mobile image alignment

【解决方案1】：

当您在 JQM css 链接之后插入 css 时，您始终可以添加 css 并覆盖 JQM 内容。我拿了你的代码并稍微修改了一下，所以它应该给你一个起始点。我不知道您的或 JQM css 是否会干扰它，因为我现在无法尝试。

由于所有兼容性 css（前缀属性），我的 CSS 绝不会更小。但优点是盒子布局更加灵活，它还允许在 2 个方向上居中内容，还允许排序和对齐。

http://www.w3.org/TR/css3-flexbox/

这只是一种选择。

http://dabblet.com/gist/3132163

【讨论】：

它们与您的那些 css 类相互重叠（不完全）。我对 css 员工很不好......:(你的意思是我只需要 ui-grid-a 的 css-classes？我试着制作另一个这样的：.pic {border:4px solid gray;border-radius : 15px; width:130px;--------> Not working? height:130px; text-align:center; background-color: white; margin: 4px; padding: 0px; } 当然宽度也不起作用. div 占行的 50%，不再是 130 像素。
JQM.css 正在覆盖我的 css，这就是为什么宽度不起作用 .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.95%； } .ui-grid-a > :nth-child(n) { 宽度：50%;右边距：-.5px； } .ui-grid-a .ui-block-a { 清除：左； }

【解决方案2】：

我让它工作了。我想这不是那么复杂的解决方案，但它正在工作。

.pics {
  background-color: white;
  border-radius: 15px;
  border: 4px solid grey;
  height: 130px;
  padding: 0px;
  text-align: center;
  width: 130px !important;
}
.picLeft {
  float:left;
  margin-left: 10px !important;

}

.picRight {
  float:right;
  margin-right: 10px !important;

}

我愿意接受任何更好的解决方案，并感谢 Torsten！萨米人

【讨论】：

由于使用类，可以加入一些属性，只需给两个图像容器一个类，就可以省去一半的代码。