个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在制作一个网站，我正在添加一个包含图片的表格，但我无法在以下 td 单元格中将表格下方的文本居中。我当前的代码将其偏移到左侧而不是直接位于其下方。这是我的代码:
HTML:
<body>
<section>
<section id="pictures">
<div>
<img src="images/ritual4.jpg" id="slide" class="floatLeft" alt="This is a picture of a group of young men posing and smiling">
<script language="JavaScript">slideIt();</script>
<p>Ritual and Mills Music Mission</p>
<img src="images/ossian.jpg" alt="This is a picture of a group of dressed up men posing with an older gentleman.">
<p>Spaghetti Dinner Fall 2015</p>
</div>
</section>
<section id="main">
<h1>Members</h1>
<hr>
<div class="title">
<table>
<tr>
<td><img src="images/david.jpg" alt="This is a picture of David, President of the Gamma Beta Chapter."></td>
<td><img src="images/matth.jpg" alt="This is a picture of Matt Halverson, Vice-President of the Gamma Beta Chapter."></td>
<td><img src="images/zack.jpg" alt="This is a picture of Zack Bartsch, Secretary of the Gamma Beta Chapter."></td>
<td><img src="images/jacobandpete.jpg" alt="This is a picture of Jacob Walter, Tresurer of the Gamma Beta Chapter."></td>
</tr>
<tr>
<td><p id="center">XXX</p></td>
<td><p id="center">XXX</p></td>
<td><p id="center">XXX</p></td>
<td><p id="center">XXX</p></td>
</tr>
CSS:
.title{
text-align: center;
width:100%;
}
table{
margin-right: auto;
margin-left: 45px;
border-width: 1px;
}
#center{
display: table-cell;
vertical-align: center;
font-size: 12px;
margin-left: 115px;
}
td img{
display: table-cell;
vertical-align: center;
width:55%;
height:5%;
ms-transform: rotate(90deg); /* IE 9 */
webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
最佳答案
你的 html 有一些你需要解决的缺陷，比如设置多个同名的 id，比如 p 标签有“center”，所以我去掉了“table”部分来展示如何居中正文。
td img{
width:55%;
height:25%;
}
td, p {
text-align: center
} <table>
<tr>
<td><img src="images/david.jpg" alt="This is a picture of David, President of the Gamma Beta Chapter."></td>
<td><img src="images/matth.jpg" alt="This is a picture of Matt Halverson, Vice-President of the Gamma Beta Chapter."></td>
<td><img src="images/zack.jpg" alt="This is a picture of Zack Bartsch, Secretary of the Gamma Beta Chapter."></td>
<td><img src="images/jacobandpete.jpg" alt="This is a picture of Jacob Walter, Tresurer of the Gamma Beta Chapter."></td>
</tr>
<tr>
<td><p class="center">XXX</p></td>
<td><p class="center">XXX</p></td>
<td><p class="center">XXX</p></td>
<td><p class="center">XXX</p></td>
</tr>
</table>关于html - 使用表格和 td 在图像下方居中文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34122334/
26
4
0
我正在用一个 TD 和一个 colspan 属性替换多个 TD。 然而，这呈现完全不同。 我不明白为什么 不同于 我的问题是前 2 个 TD 的宽度之和与 colspanned TD 的宽度不同。
我想这是个愚蠢的问题，但我是 json 的新手，所以任何答案都会有所帮助。 我有 json 文件: `{"aaData": [ [1, "70.1700", "2008-12-29 11:23:00"
我有一个类似 html 的网页格式如下: .... . . . alo foo bla bla 现在，我只知道值 bla bla , 根据该值我们可以跟踪或找到 3rd
我有以下 html 代码: Add New Item test test test test test test test te
Name1 Position1 Operation1 Name2 Position2
如果其中的数据与同一行上第三列 td 内的数据匹配，我需要做的是向第一列 td 添加一个类。 http://jsfiddle.net/rUssu/ html 表格 firstsecondthi
有什么方法可以清除或隐藏第一个 td 的内容，从双列表中的第二个 td，而无需对实际 td 的任何编辑权限？ 所以我想隐藏下表中的数字 1. Content
当第一个高度大于第二个 , 包含第二个文本 与中心对齐。我想要第二个 的文本或元素当第一个 对齐到左上角的高度大于秒。 我如何使用 css 来做到这一点？ ？ HTML5, CSS3 an
我这里遇到了一些麻烦。我正在开发一个按钮，一旦选择该按钮将运行 JavaScript 函数 - ShowColumn() - 这将使表格列出现。表格列首先将被隐藏 - “display:none;”
我需要将第一个 td 设为 100% 宽(包括图像)并将其他 td 放在第一个 td 下方。如何在不更改 HTML 的情况下执行此操作？ 这是我的: #katalogas { float:left;
用于创建规则列表的Java类 public class CompArray { public ArrayList a1= new ArrayList(); public CompArray (){
我想在悬停在特定 td 上时更改特定 td 之前所有 td 的背景颜色。 因此，当我将鼠标悬停在该图标上时，该特定行中它之前的所有图标和文本都会更改它们的背景。 任何人都可以建议如何实现它。 这是我的
我今天花了一些时间查看使用 JQuery 遍历表及其行的示例，经过大量试验后我能够做到这一点。但是我在尝试从 td 元素获取值时遇到问题，因此我可以更改为另一个 td 元素的颜色。我有一个绑定(bin
这个问题在这里已经有了答案: Is there a "previous sibling" selector? (32 个答案) 关闭 7 年前。 我正在构建一个与此类似的表: td
当我想设置 td 的宽度时，我将 td 设置为如下宽度: ... 我已经看到通过添加一个空的 div 来设置 td 宽度: some text .h-间隔符{ 高度:0； 宽度:0； 溢
我有以下 HTML 表格: Products Pack Of Quantity Volume Unit Reb
我需要提升文本，但如果我将类应用于 IE、Opera 和 Chrome 中的 TD 或 TR，则所有单元格都会提升(背景和边框以及单元格中的文本)。请看例子: Untitled D
我试图在所有 之间放置边距除了 的 margin-top在第一行， 的底部边距在最后一行。那可能吗？谢谢。 table { border: 1px solid black; width: 98%;
我需要发布我的 td 标签的这些值，因为这是一个使用 jquery 的可编辑表。我不确定这里的问题是脚本还是 td 标签？目前我的 var_dump($_POST) 没有返回任何值。 参见下面的代码，
我想检查当前网格单元格是否是行中最后一个可见单元格。 //accurately confirms if cell is the last cell in the row, assuming there
我是一名优秀的程序员,十分优秀！