显示居中的图像行

2024-05-13

我有一排三张图像,目前显示得很好。

现在,我想在这三个图像的正下方显示另外两个图像,并且我希望它们居中(它看起来有点像一个颠倒的金字塔)。

无论我做什么,底行都保持左对齐。

这是.css

.category
{
 width:176px; 
 font-size:80%; 
 text-align:center;
 float:left;
 position:relative;
}

这是 HTML:

 <div style='width:95%; align:center'>
 <div class='category'><a href='individual.php'><img src='images/individual.jpg' style="padding-bottom:0.0em;" border='0' alt='Individual Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
 <b>Individuals</b></div>        
 <div class='category'><a href='community.php'><img src='images/community.jpg' style="padding-bottom:0.0em;" border='0' alt='Community based Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
 <b>Communities</b></div>        
 <div class='category'><a href='/police'><img src='images/first_respond.jpg' style="padding-bottom:0.0em;" border='0' alt='Police and send Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a>
 <b>Fire/Police</b></div>
 <br>
 <div class='category'><a href='business.php'><img src='images/business.jpg' border='0' alt='Electronic Crime Watch Alerts by Email and Text Messaging for Businesses'></a>
 <b>Businesses</b></div>        
 <div class='category'><a href='utility.php'><img src='images/utility.jpg' border='0' alt='Phone, Cable, Water, Gas and Power Outage Alerts'></a>
 <b>Utilities</b></div>
 </div>

您可以在这里看到原始的三个:http://www.neighborhoodwatchalerts.com/ http://www.neighborhoodwatchalerts.com/

因为我不希望测试页面显示在搜索引擎中,所以您可以获取上面的 URL 并将 index2.php 添加到其中,然后查看所有 5 个图像。

任何建议,将不胜感激!


如果您将类别 div 设置为具有 css 属性display:inline-block,他们会遵守text-align: center容器的规则。
这是一个小提琴 http://jsfiddle.net/KhNKL/1/

标记示例

<div class="container">
    <div class="category"></div>
    <div class="category"></div>
    <div class="category"></div>
    <br/>
    <div class="category"></div>
    <div class="category"></div>
</div>

Css

.container{
    border: 1px solid #ccc;
    text-align: center;
}
.category{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #ccc;
    margin: 5px;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

显示居中的图像行 的相关文章

  • AndroidResultContracts.TakePicture() 返回布尔值而不是位图

    合同已变更为退货Boolean代替Bitmap从 androidx activity 版本 1 2 0 alpha05 开始 我怎样才能使用Boolean由内置返回AndroidResultContracts TakePicture htt
  • CSS“内容”不起作用

    我想通过 CSS 添加该段落的文本 而不是在 HTML 中 因为它会随着网站的响应能力而变化 现在我无法让它工作 我想知道CSS是否有问题 另外 这是唯一可以做到的方法 使用纯 HTML 和 CSS 还是有另一种方法来定位文本并根据每个分辨
  • 使用 CSS 的样式选择选项

    我正在尝试使用 CSS 设置选择选项列表的样式 我希望列表的时间之间有更多的填充 因为它们似乎被压在一起 我尝试向选项元素添加填充 但这似乎不起作用 有任何想法吗 这是我的代码 HTML
  • 为什么我的图标在 DIV 布局中从上到下排列而不是从左到右排列?

    我将这 3 个图标包含在单独的 DIV 中 所有这些图标都包含在一个 DIV 中 div div class divicon img src icons text png class icon div div class divicon i
  • 使用 JQuery 更改表附加行中某些单元格的背景颜色

    我正在向表中追加一行 如何更改该行中一组单元格的背景颜色 假设列有 25 列 从 17 到 22 的列需要更改背景颜色 这是我到目前为止所尝试的 table1 append row1 row1 children td not td eq 0
  • CSS:应用于类组合的样式?

    我不确定这是否可行 但是当您想根据应用于元素的类的组合来设置元素的样式时 是否可以在 CSS 中使用语法 我知道我可以使用 jQuery 或其他东西检查元素并根据它所具有的类更改它的样式 但是有没有一种纯 CSS 方法可以做到这一点 例如
  • 如何从矩形点计算旋转角度?

    我有4分1 2 3 4闭合一个矩形 这些点按以下方式排列在数组中 x1 y1 x2 y2 x3 y3 x4 y4 我遇到的问题是矩形可以旋转一定角度 如何计算原始点 灰色轮廓 和角度 我试图在 javascript css3 transfo
  • 如何为多个元素添加Class?

    我正在使用这段 javascript 向多个元素添加一个类 我试图引用多个 div 并向它们添加类 它只适用于第一个 JavaScript
  • data:image/png;base64 是什么意思?

    我从一个在线网站上举了一个例子 CSS 包含一个指向 png 的 URL 和一些随机字母 在这两种情况下 任何人都可以告诉我如何制作这样的代码 或者更确切地说 这些代码是关于什么的 这是html
  • 使 html svg 对象也成为可点击的链接(在 iPhone 上)

    这个问题与使 html svg 对象也成为可点击的链接 https stackoverflow com q 11374059 4825796 但给出的答案似乎不适用于 iPhone ios 9 3 safari 和 chrome 浏览器 我
  • 滚动视图上的固定按钮

    我目前正在尝试在屏幕右下角的滚动视图上显示一个按钮 但它不起作用 当我滚动视图时按钮会移动 我尝试先插入按钮 但滚动视图位于其上方 class HomePage extends Component loadUserItems this pr
  • 为什么插入符号在具有position:relative的contenteditable中不可见?

    When a contenteditable元素有position relative和背景颜色 插入符号放置在该元素中时是不可见的 这是一个例子 bug position relative background color lightgre
  • 如何将红色边框与必需的属性一起添加到输入字段?

    目前 如果输入字段带有required属性为空时 会显示浏览器默认的错误信息 如果我删除此属性 由于我的 JavaScript 代码 它将在输入字段上显示红色边框 我如何同时显示两者 form submit function e e pre
  • CSS 样式在部分回发时停止工作

    在 ASP net C 应用程序中 我有一个带有自定义 css 的复选框 CSS 文件是 复选框
  • Twitter Bootstrap - 下拉菜单 - 箭头键不适用于 Firefox 中的输入标签

    要求 我想在带有用户名和密码字段的下拉菜单中放置一个登录表单 我可以做到这一点 除了以下问题之外 一切正常 Issue 打字时我无法使用箭头键 上 下 firefox 当输入位于下拉代码之外时 这很有效 这适用于其他浏览器 例如 googl
  • 如何按时间间隔翻转div

    您好 请看这个脚本并告诉我如何按时间间隔翻转 A B 和 C div 我希望A先翻转然后停止 B接下来翻转并停止 然后C然后再次回到A B和C 就像循环一样 然后重新开始 这在 CSS3 中可能吗 在此代码中 所有 div 同时翻转 HOL
  • CSS如何制作可滚动列表

    我正在尝试创建一个由标题和标题下方的项目列表组成的网页 我希望项目列表可以垂直滚动 我还希望网页占据整个窗口 但不要更大 目前我的问题是项目列表不可滚动 而是延伸到窗口底部下方很远 这导致窗口可滚动 应该做什么CSS属性位于html bod
  • 什么时候可以使用Javascript,什么时候不可以?

    不使用太多 javascript jquery 是个好习惯吗 我们应该尽可能避免它 为了良好的可访问性 吗 什么时候可以使用 JavaScript 什么时候不能在网页设计和开发中使用 JavaScript 在什么场景 什么条件下 Updat
  • 表单 CSS:根据选中/未选中状态设置单选框的父级(标签)样式

    所以我有一个表格 表格中提出的大多数问题都是使用无线电输入 我要和
  • 标题的下边框小于宽度

    我需要创建一个下划线效果底部边框小于h2标题的宽度 通常我不上传图片 但我认为这可能有助于进一步解释问题 您可以为此使用伪元素 例子 http jsfiddle net SZ39x pseudo border position relati

随机推荐