【问题标题】:JQuery Mobile Listview Thumbnail AlignmentjQuery Mobile Listview 缩略图对齐
【发布时间】:2011-12-31 12:13:11
【问题描述】:

我正在使用 JQuery Mobile listview 创建带有缩略图的项目列表。

如何为 Listviews 中使用的缩略图设置对齐方式?

我尝试使用alignvertical-align 设置图像的样式属性,甚至用<center> 标记包装图像,但它不起作用。

我也尝试了margin-top,但这不起作用,因为无论其高度如何,它都会将所有拇指向下推。我只想垂直和水平居中小于 80 x 80 像素的图像。

我想将图像水平和垂直对齐到中心。

【问题讨论】:

    标签: jquery listview mobile thumbnails


    【解决方案1】:

    JQuery mobile 将以下样式应用于您的ui-li-icon

    .ui-li-icon {
         position: absolute;
         left: 1px;
         top: 0;
         max-height: 80px;
         max-width: 80px;
     }
    

    为了不破坏现有的实现,您可以将图标图像包装在另一个标签中,例如:

    <li>
       <a href="#p1">
             <p class="my_icon_wrapper">
                  <img src="images/myicon_image." width="32" height="32"/>
                 </p>
            <h3>List item title</h3>
            <p>List item description</p>
       </a>
    </li>
    

    my_icon_wrapper 可以实现一些 jQuery Mobile 所做的样式,例如:

    .my_icon_wrapper {
            float: left; 
            width: 80px; height: 80px;
            text-align: center; 
            vertical-align: middle; 
    }
    

    您需要稍微调整一下样式才能获得所需的效果。

    【讨论】:

    • 不错的答案,但现在我认为我们只能使用这个属性:Data-iconpos="center"
    • data-iconpos 我只用于按钮图标,而不是列表视图中的缩略图
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-09-25
    • 2012-02-23
    • 1970-01-01
    • 1970-01-01
    • 2023-04-02
    • 2015-10-25
    相关资源
    最近更新 更多