如何使用CSS <div>在另一个内部水平居中<div>？
<div id="outer">
<div id="inner">Foo foo</div>
</div>
我正在尝试将一个<div>块元素水平居中在页面上并将其设置为最小宽度.最简单的方法是什么？我希望<div>元素与我的页面的其余部分内联.我将尝试绘制一个例子:
page text page text page text page text
page text page text page text page text
-------
| div |
-------
page text page text page text page text
page text page text page text page text
我使用以下代码.如何使用CSS将此表放在页面的中心？
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The Main Page</title>
</head>
<body>
<table>
<tr>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
<td><button class="lightSquare"></button></td>
<td><button class="darkSquare"></button></td>
</tr>
</table>
</body>
</html>
使用CSS水平和垂直对齐div其位置的最简单方法是relative什么？它的宽度和高度div是未知的,即它应该适用于每个div维度和所有主要浏览器.我的意思是中心对齐.
我想使用以下方法进行水平对齐:
margin-left: auto;
margin-right: auto;
像我一样在这里.
这是一个很好的跨浏览器水平对齐解决方案吗？
我怎么能做垂直对齐？
我知道关于这个问题有很多问题,但对我来说没有任何问题.
我需要将PanelGrid对齐到中心(水平).
这是我的panelgrid
<p:panelGrid styleClass="panelGridCenter">
和我的CSS:
.panelGridCenter td,.panelGridCenter tr {
text-align: center;
}
它只是将内容对齐到中心,而不是panelGrid
当我使用此代码段时
<h:panelGrid id="myGrid" columns="1"
rendered="#{myBean.showResults}" width="50%"
border="1" style="text-align: center;">
panelGrid的项目将是集中的
但
我想集中h:panelGrid本身在我的XHTML页面的中心
就像这个HTML代码
<table id="myGrid" border="1" align="center">
我正在使用XHTML 1.0 Transitional doctype html文件,我希望有一个宽度为800px的主div,并使其显示为居中(不是div内容,而是div本身).
我过去用过这个:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
<!--
html, body { margin:0; padding:0; }
#main-container { background:black; width:800px; }
-->
</style>
</head>
<body>
<center>
<div id="main-container">
Content
</div>
</center>
</body>
</html>
但我不确定这是否是跨浏览器兼容的,或者它是否有效的xhtml.
我想将我的表格居中在它所在的水平行的中心。我认为这很简单
#control {
text-align: center;
}
我要居中的元素是
<div id="control" class="btn">
<div id="btn_container"><img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /></div>
<span>Start</span>
</div>
但是，该元素仍未居中 - https://jsfiddle.net/xwdnvcy5/58/。我没有得到什么非常明显的东西，但我无法说出它是什么。
css ×8
html ×8
alignment ×2
center ×2
jsf ×2
centering ×1
html-table ×1
javascript ×1
jquery ×1
panel ×1
primefaces ×1
text-align ×1
xhtml ×1